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A 容 提要 


本 书 循序 渐进 地 讲述 了 JavaScript 及 相关 的 CSS. DOM, Ajax» Query l1 书 中 从 JavaScript 语 



























































































































































言 基础 开始 ， 分 别 讨论 了 图 像 、 框 架 、 浏 览 器 窗 表单 、 正 则 表达 式 、 事件 和 cookie， 并 在 上 一 版 
的 基础 上 新 增 了 两 章 ， 讲 述 jQuery —— 本 书 不 仅 介绍 了 基础 知识 和 使 用 方法 ， 也 深入 探讨 了 
JavaScript 应 用 示例 。 

























































































本 书 适合 有 志 于 从 事 Web 开发 和 Web 设计 的 初学 者 阅读 ， 也 是 高 校 相关 课程 理想 的 教材 。 
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名 迎合 FavaSerptl (RALLIES LATEIN, TAMING, KIE 
人 人 用。 本 书 是 一 本 轻松 的 JavaScript 入 门 教程 ， 所 以 即使 不 是 计算 机 高 手 ， 你 也 可 以 由 此 
很 快 学 会 脚本 编写 。 任 何 时 候 你 都 不 需要 借助 工具 包 。 就 像 我 们 的 一 位 朋友 说 的 ;“ 我 们 已 经 够 
疯狂 了 ， 所 以 你 没有 必要 这 样 做 啦 1” 


读者 对 象 

我 们 猜想 既然 你 有 兴趣 学 习 JavaScript， 那 么 肯定 有 创建 HTML 页 面 和 Web 站 点 的 经 验 ， 而 且 
希望 更 进一步 , 使 站 点 更 具 交 互 性 。 学 习 本 书 并 不 要 求 你 了 解 任何 编程 或 脚本 编程 的 知识 ,也 不 
要 求 你 是 HTML 专 家 ( 当然 , 如 果 你 是 HTML 专 家 也 无 妨 ) 我 们 只 假设 你 具备 构建 网 页 的 基本 知 
识 ， 而 且 熟 悉 常用 的 HTML 标 签 ， 比 如 链接 、 图 像 和 表单 。 

在 某 些 章 首 题 为 “目前 需要 了 解 的 HTML 知 识 ” 的 表 中 ， 我 们 对 HTML 做 了 一 些 解释 。 并 非 
每 章 都 有 这 部 分 内 容 ， 只 有 在 我 们 认为 你 需要 速 查 的 地 方才 会 提供 。 有 了 这 些 HTML 信 息 ， 你 就 
不 需要 在 阅读 本 书 的 同时 ， 再 去 翻 另 一 本 书 或 者 打开 相关 网 页 查找 HTML 属性 的 语法 了 ”。 

如 果 你 对 编程 有 所 了 解 ， 应 该 会 注意 到 本 书 介绍 JavaScript 的 方式 与 其 他 图 书 的 风格 很 不 一 
样 。 本 书 并 不 深入 介绍 JavaScript 的 语法 和 结构 ， 而 且 本 书 也 不 是 一 本 深入 而 全 面 的 语言 参考 书 
( 当然 附录 A 中 提供 了 一 些 很 有 价值 的 内 容 )。 这 方面 市 面 上 已 经 有 不 少 很 好 的 书 ， 附 录 D 中 列 出 
了 它们 。 本 书 和 这 些 书 之 间 的 差异 是 ， 本 书 并 不 拘泥 于 形式 ， 而 是 集中 地 演示 如 何 用 JavaScript 
完成 一 些 有 用 的 任务 ， 不 熬 述 大 量 的 额外 信息 。 

在 本 书 的 前 几 版 中 , 我 们 增加 了 对 Ajax 的 介绍 。 这 种 技术 结合 使 用 了 JavaScript 和 其 他 常用 的 
Web 技 术 为 网 页 增加 交互 性 ， 并 且 改 善 了 Web 站 点 的 用 户 体 验 。 本 书 提供 了 Ajax 基础 知识 和 实际 
示例 ， 帮 助 你 给 站 点 增加 Ajax 功能 ， 而 不 必 这 入 学 习 Web 编 程 。 在 这 个 版 本 中 ,我 们 添加 了 更 多 
示例 和 技术 介绍 ， 使 用 jQuery 框架 〈 你 可 能 将 其 当做 构建 块 ) 来 向 网 站 轻松 添加 有 用 的 功能 。 


如 何 使 用 本 书 


本 书 采 用 一 些 特殊 的 版 式 ， 帮 助 你 更 轻松 地 学 习 和 理解 JavaScript。 
组 成 本 书 的 大 部 分 内 容 由 分 步 说 明 构成 。 我 们 在 书 中 以 特殊 的 字体 样式 表示 HTML 或 





















































































































































(D 要 学 习 HTML， 推 荐 阅读 《HTML5 基 础 教程 (第 7 版 )》 一 一 编者 注 





JavaScript 代 码 ， 比 如 : 


<div id = "thisDiv"> 
window.onload = initLinks; 


你 还 会 注意 到 ，HTML 和 JavaScript 代 码 都 显示 为 小 写 。 这 人 么 做 是 因为 ， 这 个 版 本 中 的 所 有 脚 
本 都 符合 W3C ( World Wide Web Consortium ， 万 维 网 联盟 ) 的 HTML 5 标准 。 当 在 JavaScript 中 看 
到 引号 时 ， 总 是 直 引 号 〈' 或 " )， 而 不 是 弯 引 号 ( “或 “)。 弯 引号 会 使 JavaScript 失 效 ， 在 编写 脚 
本 时 应 该 避免 使 用 。 

在 与 分 步 说 明 对 应 的 脚本 中 , 我 们 以 粗 体 突出 显示 脚本 中 正在 讨论 的 部 分 , 这 样 你 就 能 够 马 
上 找到 我 们 正在 讨论 的 代码 。 我 们 还 常常 在 Web 浏 览 器 窗口 的 屏幕 图 中 以 灰色 底 纹 突 出 显示 其 中 
某 些 重要 的 部 分 。 

因为 图 书 的 页 面 比 计算 机 屏幕 窗 ， 所 以 一 些 JavaScript 代 码 行 在 页 面 上 排 不 开 。 出 现 这 种 情况 
时 , 我 们 将 代码 行 分 为 多 行 , 在 接续 行 前 面 使 用 箭头 一 表示 这 是 续 行 , 并 且 将 续 行 缩 进 , 如 下 所 示 : 


dtString = "Hey, just what are you 
— doing up so late?"; 





















































关于 浏览 器 


在 第 6 版 中 有 一 个 大 的 变化 : 我 们 不 再 支持 那些 版 本 非常 老 的 浏览 器 或 者 那些 在 支持 Web 标 
准 方 面 做 得 很 差 的 浏览 器 。 我 们 发 现 ， 几 乎 所 有 Web 用 户 都 升级 到 了 现代 浏览 器 ， 它 们 充分 地 支 
持 公 认 的 Web 标 准 ( 比如 HTML、CSS2 和 DOM )。 这 包括 IE 7 或 更 高 版 本 ，Firefox 1.0 或 更 高 版 本 ， 
Safari 和 Chrome 的 所 有 版 本 ， 以 及 Opera 7 或 更 高 版 本 。 

我 们 在 几 种 操作 系统 上 的 多 个 浏览 右 中 测试 了 脚本 ， 这 些 操 作 系 统 包 括 Windows( Vista 和 
Windows 7 )、Mac OS X ( 10.4.11 或 更 高 版 本 ) 和 Ubuntu Linux (我 们 只 在 Ubuntu 的 默认 浏览 吉 
Firefox 中 测试 了 脚本 )。 

RANEH i LR DI k 微软 Windows 版 本 的 下 一 一 虚拟 测试 了 本 书 中 的 所 有 内 容 (我 
们 使 用 了 下 7、IE 8 和 IE 9 )。 我 们 还 用 Mac 平 台 和 Windows 平 台 上 的 Firefox 3 和 Firefox 4 以 及 Safari 5 
对 脚本 做 了 测试 。 使 用 Safari 5 进行 测试 ， 意 味 着 这 些 脚 本 对 于 从 WebKit 引 擎 衍生 出 来 的 任何 浏 
览 器 〈 比 如 Google Chrome ) 都 可 以 正常 使 用 ， 对 基于 KHTML (Safari 最 开始 使 用 的 开源 呈现 引 
擎 ) 的 浏览 器 C 比如 Linux 浏览 器 Konqueror ) 也 可 以 正常 使 用 。WebKit 也 是 移动 操作 系统 浏览 器 
核心 之 一 ， 比 如 苹果 的 OS、Google 的 Android、Research in Motion 的 Blackberry 6 及 更 高 版 本 ， 以 及 HP 
的 WebOS。 至 此 ， 我 们 主要 将 脚本 在 iPhone 和 iPad 上 面 做 了 测试 。 


不 必 输 入 代码 


一 些 JavaScript 图 书 只 在 书 中 印刷 出 脚本 代码 , 你 在 实践 时 必须 自己 输入 代码 。 我 们 认为 这 种 
方式 已 经 过 时 了 。 作 者 们 不 得 不 完成 这 些 艰 苦 的 输入 工作 , 但 是 你 不 必 重 复 这 些 劳动 。 我 们 为 本 
书 提供 了 一 个 配套 Web 站 点 ， 其 中 包含 本 书 中 的 所 有 脚本 ， 你 可 以 将 这 些 脚 本 复制 并 粘贴 到 自己 
的 网 页 中 。 这 个 站 点 还 包含 其 他 提示 和 脚本 。 如 果 我 们 在 书 中 发 现 了 任何 错误 ,也 会 在 这 里 给 予 
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更 正 。 这 个 配套 站 点 的 网 址 是 www.javascriptworld.com。 

如 果 由 于 某 种 原因 你 打算 输入 某 些 脚本 示例 , 那么 可 能 会 发 现 这 些 示例 似乎 不 起 作用 , 这 是 
因为 你 没有 这 些 示 例 所 用 的 支持 文件 。 例 如 ， 在 图 像 上 实现 屏幕 效果 的 示例 中 ， 需 要 图 像 文 件 。 
但 请 放心 ， 这 些 文件 都 放 在 本 书 的 Web 站 点 上 了 ， 而 且 打 包 好 了 供 你 下 载 。 你 找到 的 可 下 载 文 件 
包含 所 有 脚本 、HTML 文 件 、CSS 文 件 以 及 用 到 的 所 有 媒体 文件 。 如 果 你 遇 到 任何 问题 ， 可 以 查 
看 配套 Web 站 点 上 的 FAQ( 常见 问题 )。 

如 果 阅 读 了 FAQ， 而 你 的 问题 还 没有 解决 ， 可 以 通过 js8@javascriptworld.com 给 我 们 发 邮件 。 
很 抱歉 地 说 一 声 ， 因 为 收 到 的 邮件 太 多 , 所 以 我 们 不 可 能 也 不 会 回复 那些 把 本 书 问 题 发 送 到 我 们 
个 人 邮件 地 址 的 邮件 。 但 是 ， 我 们 可 以 保证 发 送 到 js8@javascriptworld.com 的 邮件 会 得 到 答复 。 


开始 吧 


JavaScript 最 好 的 一 点 是 它 很 容易 用 一 个 简单 的 脚本 在 网 页 上 实现 很 酷 的 效果 ,然后 根据 需要 
逐渐 添加 更 复杂 的 素材 。 你 不 必 等 到 学 完整 本 书 ， 就 可 以 开始 改进 自己 的 网 页 。 等 到 你 看 完 本 书 
的 时 候 ， 将 能 用 Ajax 和 jQuery 给 站 点 添加 高 级 的 交互 效果 了 。 






















































































当然 , 千里 之 行 ， 始 于 足下。 欢迎 光临 ， 请 勿 将 手 伸 出 窗外 ， 照 相 时 请 不 要 用 闪光 灯 。 探 索 
JavaScript 的 旅程 已 经 开始 。 
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X 于 Web 站 点 的 开发 者 来 说 ,HTML 的 发 展 是 一 件 好 坏 参 半 的 事 , 在 万 维 网 发 展 的 早期 ,HTML 
相当 简单 ， 很 容易 就 能 够 掌握 设计 网 页 所 需 知道 的 一 切 。 

随 着 Web 的 发 展 ， 页 面 设计 人 员 还 希望 他 们 的 页 面 能 够 与 用 户 进行 交互 ，HTML 很 快 就 显得 不 
足以 满足 这 一 需求 了 。Netscape 发 明了 JavaScript ,作为 控制 浏览 器 和 给 网 页 添加 活力 和 交互 性 的 方法 。 

自从 诞生 以 来 ，JavaScript 已 经 经 历 了 不 小 的 演化 (尽管 有 时 候 在 不 同 的 浏览 器 上 演化 的 方向 有 
所 不 同 )。 在 本 书后 面 ， 我 们 将 详细 讨论 JavaScript 的 演化 。 

在 本 章 中 ,你 将 了 解 JavaScript 是 什么 ( 以 及 不 是 什么 )， 它 可 以 做 什么 (以 及 不 能 做 什么 ) 和 
JavaScript 语言 的 一 些 基 础 知识 。 另 外 ， 还 会 向 你 介绍 Ajax， 这 是 JavaScript 和 其 他 技术 的 一 种 组 合 ， 
它 在 Web 站 点 的 交互 性 和 创造 性 方面 掀起 了 新 的 浪潮 。 














1.1 JavaScript 是 什么 


JavaScript 是 一 种 可 以 用 来 给 网 页 增加 交互 性 的 编程 语言 。 但 是 ， 如 果 你 不 是 程序 员 ， 那 么 也 不 
必 担 心 。Web 上 有 大 量 JavaScript 代码 , 复制 一 下 并 稍 做 修改 , 就 可 以 供 自己 使 用 ,实际 上 , 这 种 “站 
在 其 他 程序 员 肩 膀 上 ”的 方式 正 是 熟悉 JavaScript 的 好 方法 。 

为 了 帮助 你 熟悉 JavaScript， 我 们 建立 了 一 个 与 本 书 配套 的 Web 站 点 。 在 这 个 站 点 上 提供 了 本 书 
中 的 所 有 脚本 〈 这 样 ， 你 就 不 用 自己 输入 了 )， 以 及 更 多 的 说 明 、 附 加 资料 和 更 新 内 容 。 站 点 的 网 址 
是 www.javascriptworld.com。 

常常 会 看 到 JavaScript 被 称 为 “脚本 语言 ”( scripting language )， 这 暗示 着 它 更 适合 编写 脚本 而 不 
是 程序 。 这 实际 上 并 没有 根本 性 的 差异 。JavaScript 脚本 也 是 一 种 程序 ， 它 们 包含 在 HTML 页 面 内 部 
(原先 编写 脚本 的 方式 ), 或 者 驻 留 在 外 部 文件 中 ( 现在 的 首选 方法 ) 在 HTML 页 面 上 ， 因 为 脚本 文 
本 包围 在 <script> 标 签 中 ， 所 以 它 不 会 显示 在 用 户 的 屏幕 上 ， 而 Web 浏览 器 知道 应 该 运行 JavaScript 
程序 。<script> 标 签 常常 放 在 HTML 页 面 的 <head> 部 分 中 ， 如 脚本 1-1 所 示 。 但 是 如 果 愿 意 ， 也 可 以 
将 脚本 放 在 <body> 部 分 中 。 如 果 你 还 不 熟悉 这 些 HTML 概念 ， 需 要 关于 HTML 的 更 多 信息 ， 那 么 我 
们 建议 你 读 一 下 Elizabeth Castro ff] (HTML XHTML CSS 基础 教程 (第 6 版 )》。 


脚本 1-1 这 个 非常 简单 的 脚本 在 浏览 器 窗口 中 输出 “Hello, Cleveland!” 


<!DOCTYPE html» 
<html> 



















































































2 9 1% 了 解 JavaScript 





<head> 
<title>Barely a script at all</title> 
<script> 
window.onload = function() { 


document.getElementById ("myMessage").innerHTML = "Hello, Cleveland!"; 


</script> 
</head> 
<body> 
«hi id="myMessage"> 
</h1> 
</body> 
</html> 


1.2 JavaScript 不 是 Java 


尽管 名 字 中 有 Java, 但 是 JavaScript 和 Java 之 间 没 有 太 大 的 关系 。Java 是 一 种 功能 完备 的 编程 语 
A, H Sun 公司 开发 ， 由 Oracle 公司 推广 (自从 Oracle 收购 Sun 公司 以 来 )。Java 是 C 和 C++ 编程 语 











言 之 后 的 又 一 种 主流 语言 ,程序 员 可 以 使 用 它 创建 完整 的 应 











程序 和 控制 消费 类 电子 设备 。 与 其 他 语 











AA, Java 宣称 具有 跨 平台 兼容 性 。 也 就 是 说 ,程序 员 应 该 能 够 编写 出 可 以 在 所 有 种 类 的 机 器 上 运 
行 的 Java 程序 ,无 论 机 器 运行 的 是 Windows, Mac OS X 还 是 任何 风格 的 Unix。 但 实际 上 ，Java 不 总 
是 能 够 实现 这 个 梦想 ， 因 为 Sun 公司 和 微软 公司 在 这 种 语言 的 发 展 方向 方面 有 很 大 的 分 疏 。 微 软 公司 
首先 试图 以 自己 的 方式 将 Java 集成 到 Windows 中 ( Sun 公司 认为 ， 这 种 方式 会 使 Java 在 Windows 上 
以 一 种 方式 工作 ， 而 在 其 他 机 器 上 以 男 一 种 方式 工作 ， 从 而 破坏 了 Java 的 跨 平台 兼容 性 )。 随 后 ， 微 
软 公司 从 Windows 中 完全 去 除了 Sun 公司 的 Java， 而 创建 了 自己 的 类 Java 语言 : C#。 经 过 两 公司 之 
间 的 一 轮 诉讼 之 后 , Sun 公司 占据 了 上 风 , 微软 从 Windows 
Linux) 上 安装 最 新 的 Java 版 本 (www.java.com/getjava/ )。Mac OS X 操作 系统 在 安装 时 会 附带 Java. 

除了 单独 的 应 用 程序 之 外 ，Java 主要 用 于 在 客户 端 (client side， 即 用 户 的 浏览 器 中 ) 创建 applet. 




















applet 是 一 种 通过 因特网 下 载 并 在 Web Dil ba dit pis 
行 的 小 程序 。 因 为 Java 具有 跨 平台 性 质 , 所 以 这 些 
applet 应 该 能 够 在 任何 支持 Java KINI Vs HP LAFA IR] 
的 方式 运行 。 在 近 几 年 中 ,我们 看 到 许多 Java applet 
被 Adobe Flash 动画 替代 了 ， 因 为 一 般 来 说 Adobe 
Flash 动画 比 Java applet 更 容易 创建 。 近 几 年 来 ， 
随 着 计算 处 理 速度 和 浏览 器 中 JavaScript 功能 的 不 
断 提升 ， 在 客户 端 使 用 Java 的 情况 越 来 越 少 。 然 
而 , Java 已 经 成 为 一 种 在 服务 器 端 编 写 代 人 码 的 流行 
语言 。 

可 以 使 用 <object> HTML 标签 将 Java applet 
和 能 和 网页， 还 要 提供 指定 applet 的 附加 信息 。 当 浏 
览 需 看 到 <object> 标 签 时 ， 它 会 从 服务 器 下 载 Java 
applet， 然 后 applet 就 会 在 这 个 标签 中 指定 的 屏幕 
区 域 中 运行 ( 见 图 1-1 )。 













































































1 移 除 了 Java, 现在 可 以 在 Windows (或 
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图 1-1 


这 个 Java applet 实现 了 一 种 西洋 跳棋 游戏 


1.5 JavaScript 不 能 做 什么 3 





1.3 JavaScript 的 起 源 


既然 JavaScript 与 Java EK, 那么 为 什么 它们 的 名 称 如 此 相似 呢 ? 这 是 计算 机 行业 最 烦人 的 恶习 
之 一 : 为 了 获得 市 场 营销 方面 的 成 功 ， 而 不 顾及 产品 实质 。 

当 Netscape 在 其 Navigator Web 浏览 器 中 添加 了 一 些 基 本 脚本 功能 时 ， 它 最 初 将 这 种 脚本 语言 称 
为 LiveScript。 与 此 同时 ,Java 开始 大 行 其 道 , 它 被 认为 是 计算 行业 中 下 一 项 伟大 的 革新 。 当 Netscape 
在 Navigator 2 中 支持 运行 Java applet 时 ， 它 也 将 LiveScript 改名 为 JavaScript， 希 望 以 此 借用 Java 的 
声势 。 尽管 JavaScript 和 Java 是 非常 不 同 的 编程 语言 , 但 这 一 事实 并 没有 阻止 Netscape 采用 这 种 市 场 
营销 手段 。 从 那 时候 开 始 ， 我 们 这 些 技术 作家 只 好 不 大 其 烦 地 解释 JavaScript 和 Java 是 不 同 的 东西 。 
MER. 我们 靠 这 挣 了 不 少 钱 ， 从 这 个 角度 来 说 ， 我 们 可 能 应 该 感谢 这 些 市 场 营 销 专家 。 

当 微 软 公 司 看 到 JavaScript 在 Web 开发 人 员 中 流行 起 来 时 ， 它 意识 到 必须 在 IE. 中 添加 一 些 脚本 
功能 。 它 原本 可 以 采用 JavaScript， 但 是 与 通常 情况 一 样 ， 微 软 公司 又 自行 其 事 ， 建立 了 自己 的 脚本 
语言 ， 这 种 语言 非常 像 JavaScript， 但 又 不 完全 相同 。JavaScript 的 微软 版 本 称 为 JScript. 


1.4 JavaScript 可 以 做 什么 




























































































用 JavaScript 可 以 做 许多 事情 ,使 网 页 更 具 交 互 
性 ， 给 站 点 的 用 户 提供 更 好 、 更 令 人 兴奋 的 体验 。 | FORUMS FORUMS 
JavaScript 使 你 可 以 创建 活跃 的 用 户 界 面 , 当 用 户 在 a tn 














页 面 间 导 航 时 向 他 们 提供 反馈 。 例 如 ， 你 可 能 在 一 7 

此 站 点 上 见 过 ， 当 鼠标 指针 停留 在 按钮 上 时 ， 会 突 图 1-2 翻转 器 是 一 个 当 鼠 标 指针 停留 在 其 上 时 会 
出 显示 按钮 。 这 是 用 JavaScript 实现 的 , 使 用 了 一 种 Be 

称 为 翻转 器 ( rollover ) 的 技术 ( 见 图 1-2 )。 

可 以 使 用 JavaScript 来 确保 用 户 以 表单 形式 输入 有 效 的 信息 ， 这 可 以 节省 你 的 业务 时 间 和 开支 。 
如 果 表 单 需要 进行 计算 ,那么 可 以 在 用 户 机 器 上 用 JavaScript 来 完成 ， 而 不 需要 任何 服务 器 端 处 理 。 
你 应 该 知道 一 种 区 分 程序 的 方式 : 在 用 户 机 器 上 运行 的 程序 称 为 客户 端 (client-side ) 程序 ,在 服务 器 
上 运行 的 程序 ( 包括 后 面 要 讨论 的 CGI ) 称 为 服务 器 端 (server-side ) 程序 。 

使 用 JavaScript， 根 据 用 户 的 操作 可 以 创建 自 定 义 的 Web 页面。 假设 你 正在 运行 一 个 旅行 指南 站 
点 ,用 户 单 击 夏威夷 作为 旅游 目的 地 。 你 可 以 在 一 个 新 窗口 中 显示 最 新 的 夏威夷 旅游 指南 。JavaScript 
可 以 控制 浏览 器 ,所 以 你 可 以 打开 新 窗口 、 显 示警 告 框 以 及 在 浏览 吉 窗 口 的 状态 栏 中 显示 自 定义 的 消 
息 。 因 为 JavaScript 有 一 套 日 期 和 时 间 特 性 ， 可 以 生成 时 钟 、 日 历 和 时 间 戳 文档 。 

JavaScript 还 可 以 处 理 表 单 ， 设 置 cookie， 即 时 构建 HTML 页 面 以 及 创建 基于 Web 的 应 用 程序 。 


1.5 JavaScript 不 能 做 什么 


JavaScript 是 一 种 客户 端 语言 。 也 就 是 说 ， 设 计 它 的 目的 是 在 用 户 的 机 器 上 而 不 是 服务 器 上 执行 
任务 。 因 此 ，JavaScript 有 一 些 固 有 的 限制 ， 这 些 限制 主要 出 于 如 下 安全 原因 。 






























































































































































QD 实际 上 ， 也 存在 服务 器 端 实现 的 JavaScript 版 本 ， 如 Rhino. 编者 注 
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4 第 1 章 了 解 JavaScript 





O JavaScript 不 允许 写 服务 器 机 器 上 的 文件 。 尽 管 写 服务 器 上 的 文件 在 许多 方面 是 很 方便 的 〈 比 
如 存储 页 面 单 击 数 或 用 户 填写 的 表单 数据 ), 但 是 JavaScript 不 允许 这 么 做 。 而 是 需要 用 服务 器 
上 的 一 个 程序 处 理 和 存储 这 些 数据 。 这 个 程序 可 以 是 用 Java、Perl 或 PHP 等 语言 编写 的 CGI 
(运行 在 服务 器 上 的 程序 )。 

O JavaScript 不 能 关闭 不 是 由 它 自 己 打开 的 窗口 。 这 是 为 了 避免 一 个 站 点 关闭 其 他 任何 站 点 的 窗 

口 ， 从 而 独占 浏览 

口 JavaScript 不 能 从 来 自 另 一 个 服务 器 的 已 经 打开 的 网 页 中 读 取 信息 。 换 句 话说， 网 页 不 能 读 取 
已 经 打开 的 其 他 窗口 中 的 信息 ， 因 此 无 法 探 察 访问 这 个 站 点 的 冲浪 者 还 在 访问 其 他 哪些 站 点 。 












































1.6 Ajax 是 什么 


简单 的 回答 是 ，Ajax 是 一 种 创建 交互 式 Web 应 用 程序 的 方式 。 这 究竟 是 什么 意思 呢 ? 我 们 来 考 
虑 一 下 可 能 通过 Web 站 点 做 的 事情 。 例如 ,你 可 能 想 和 自己 的 爱人 出 去 吃饭 ( 如 果 你 没有 爱人 ， 可 以 
和 自己 的 朋友 、 杂 威 或 宠物 一 起 去 吃饭 。 虽 然 大 部 分 人 不 会 和 宠物 一 起 去 吃饭 ， 但 这 只 是 题 外 话 。)。 
所 以 ,你 希望 知道 如 何 从 当前 的 地 点 到 达 市 内 大 家 都 在 谈论 的 那 家 有 名 的 新 餐馆 。 你 决定 到 一 个 提供 
地 图 的 Web 站 点 上 查找 路 线 。 你 会 进入 这 个 站 点 , 输入 餐馆 的 地 址 , 站 点 会 显示 一 张 标 出 了 这 个 餐馆 
的 地 图 。 这 个 站 点 会 显示 带 边 框 的 地 图 ， 如 果 希 望 改变 地 图 的 视 域 ， 那 么 可 以 单 击 边框 。 单 击 边框 ， 
BRAS ~ 10 秒 ， 地 图 就 会 重新 绘制 ， 如 果 和 希望 再 次 改变 视 域 ,， 就 重复 操作 。 这 个 过 程 很 慢 ， 而 且 响 
应 性 很 差 。 如 果 只 是 单 击 地 图 并 向 希望 的 方向 拖 动 它 ， 地 图 视 域 就 会 随 着 鼠标 拖 动 而 移动 ， 那 不 是 更 
好 吗 ? 

可 以 通过 用 Ajax 构建 的 Web 应 用 程序 向 用 户 eae 1026 Prince Ave, 95448 - Google Maps — 


e 
| >] [a A] [e] [+] Gh maps.google.com; Ta 

















































































































提供 这 种 动态 的 交互 性 ( 见 图 1-3). PEKI, JH Denn 
户 几乎 不 需要 等 待 ， 并 一 直 有 控制 能 力 ， 而 且 可 以 Google $e e se s ue ee 
创建 具有 与 传统 桌面 应 用 程序 相同 用 户 体验 的 基 wi — 
T Web 的 应 用 程序 。 这样， 用 户 就 能 够 更 快 、 更 径 。 [可 esi = 
松 地 查 明 如 何 从 家 到 达 那 家 有 名 的 餐馆 。 3-5 

] 
































































































































Ajax 是 Asynchronous JavaScript and XML ( 5 CE 
步 JavaScript 和 XML) 的 缩写 ， 这 个 词 是 由 Web fi pag 
开发 人 员 Jesse James Garrett f£ 2005 年 年 初 首创 的 。 
严格 地 说 ，Ajax 只 是 JavaScript 的 一 小 部 分 ( 尽管 i aS M 
这 一 部 分 特别 流行 )。 但 是 ， 随 着 频繁 地 使 用 ， 这 ee se lah ee Net 
个 词 不 再 指 某 种 技术 本 身 ( 比如 Java 或 JavaScript )。 
在 大 多 数 情况 下 , Ajax 一 般 是 指 以 下 这 些 技 术 图 1-3 支持 Ajax 的 Google Maps 可 以 提供 
的 组 合 : 更 流畅 更 具 交 互 性 的 用 户 体验 
Q XHTML; 
O CSS ( Cascading Style Sheet, EE; 
O 使 用 JavaScript 访 问 的 DOM (Document Object Model， 文 档 对 象 模型 ); 
O XML 或 JSON， 这 是 在 服务 器 和 客户 端 之 间 传 输 的 数据 格式 ; 
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口 XMLHttpRequest， 用 来 从 服务 器 获取 数据 。 [ 

这 个 列表 有 点 儿 复杂 ， 尤 其 是 对 于 在 JavaScript 或 其 他 Web 编程 方面 经 验 不 太 丰 富 的 人 。 但 是 ， 
不 必 担 心 ， 我 们 在 本 书 中 会 介绍 这 些 技术 。 在 学 到 关于 Ajax 的 章节 时 ， 你 应 该 已 经 掌握 了 组 成 Ajax 
的 各 种 技术 。 

Ajax 的 好 处 是 , 应 用 程序 的 大 多 数 处 理 在 用 户 的 浏览 器 中 发 生 , 而 且 对 服务 器 的 数据 请 求 往往 很 
短 。 所 以 可 以 使 用 Ajax 建立 功能 丰富 的 应 用 程序 ， 这 些 应 用 程序 依赖 基于 Web 的 数据 ， 但 是 其 性 能 
远 远 超过 老式 方法 ， 因 为 老式 方法 要 求 服务 器 传 回 整个 HTML 页 面 来 响应 用 户 操作 。 

一 些 公司 已 经 在 Ajax 方面 投入 大 量 资金 ， 尤 其 是 Google. Google 已 经 建立 了 几 个 著名 的 Ajax 
应 用 程序 ， 包 括 Gmail ( 基于 Web 的 电子 邮件 )、Google Calendar, Google Docs 和 Google Maps. 5j 
一 个 大 型 的 Ajax 支持 者 是 Yahoo!， 它 使 用 Ajax 增强 个 性 化 的 My Yahool! 门 户 、Yahoo! 首 页 Yahoo! 
Mail， 等 等 。 这 两 家 公司 都 向 公众 开放 了 其 Web 应 用 程序 的 接口 ， 人 们 可 以 使 用 这 些 接口 建立 有 意思 
的 新 应 用 程序 。 例 如 ， 许 多 人 为 Google Maps 创建 了 mashup ( 混搭 )， 这 些 程序 会 获得 地 图 并 在 地 图 
上 加 上 有 意思 、 有 用 或 好 玩 的 信息 ， 比 如 洛杉矶 地 区 所 有 日 本 餐馆 的 位 置 或 电影 摄影 棚 的 位 置 。 

V 提示 

口 在 Google Maps Mania ( googlemapsmania.blogspot.com ) 上 可 以 找到 许多 Google Maps mashup 

的 列表 。 




























































































1.7 组 合式 (snap-together) 语言 
还 有 一 点 我 们 应 该 注意 : JavaScript 是 一 种 面向 对 象 (object-oriented) 的 语言 。 这 意味 着 什么 呢 ? 


1.7.1 对象 


首先 ， 我 们 来 考虑 对 象 。 对 象 (object) 就 是 某 种 东西 。 在 现实 中 ， 一 只 猫 、 一 台 计 算 机 和 一 辆 
自行 车 都 是 对 象 ( 见 图 1-4 )。 对 于 JavaScript， 它 处 理 的 对 象 都 在 Web 浏览 器 中 ， 比 如 窗口 、 表 单 ， 
以 及 如 按钮 和 复 选 框 的 表单 元 素 ( 见 图 1-5 )。 
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A A ; 图 1-5 “按钮 和 复 选 框 是 浏览 器 对 象 ， 
图 1-4 猫 对 象 X E n] Pixel ) 可 以 用 JavaScript 来 操纵 


因为 你 可 以 有 多 只 猫 或 者 多 个 窗口 ， 所 以 给 它们 起 名 字 是 有 意义 的 。 你 可 以 把 自己 的 宠物 叫做 一 
号 猫 和 二 号 猫 ， 但 是 这 不 是 一 种 好 想法 ,原因 有 两 个 : 首先 ， 如 果 它 们 有 唯一 的 名 称 ， 就 更 容易 区 分 
它们 ; 其 次 ， 这 有 点 不 礼 狐 。 因 此 ， 本 书 中 的 所 有 示例 将 给 对 象 起 唯一 的 名 字 。 
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6 9 1% 了 解 JavaScript 





v 提示 

O 在 因特网 上 可 能 会 看 到 一 些 脚本 用 window[0] 和 form[1] 这 样 的 名 称 来 称呼 对 象 。 由 于 以 上 原 
因 ， 这 种 方式 并 不 好 。 如 果 给 脚本 中 的 不 同 对 象 起 名 字 ， 而 不 是 使 用 数字 , 那么 跟踪 对 象 会 容 
易 得 多 。 

O 有 些 爱 挑 剔 的 程序 员 会 认为 ，JavaScript 不 是 面向 对 象 的 ， 而 是 基于 对 象 ( object-based ) 的 。 
在 本 书 中 ， 这 两 个 意思 相同 。 




















1.7.2 属性 


对 象 具有 属性 ( property )。 猫 有 毛皮 ,计算 机 有 键盘 ， 自 行车 有 和 轮子。 在 JavaScript 环境 中 , 文 
档 有 标题 ， 表 单 可 以 有 复 选 框 

改变 对 象 的 属性 就 修改 了 这 个 对 象 。 相 同 的 属性 名 可 以 用 于 完全 不 同 的 对 象 。 假 设 有 一 个 名 为 
empty 的 属性 。 在 任何 合适 的 地 方 都 可 以 使 用 empty， 所 以 可 以 说 猎 的 肚子 空 了 ,也 可 以 说 猫 的 食 倪 
空 了 。 

注意 ,计算 机 的 键盘 和 自行 车 的 轮子 不 仅仅 是 属性 ， 它 们 本 身 也 是 对 象 ， 可 以 具有 自己 的 属性 。 
所 以 ， 对 象 可 以 有 子 对 象 。 
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1.7.3 方法 


对 象 可 以 做 的 事情 称 为 方法 (method) WAN, IHAIA, HITEMRE. JavaScript 
对 象 也 有 方法 : 按钮 的 click()， 窗 口 的 open(), 文本 的 selected()。 圆 括号 表示 它们 是 方法 ， 而 
不 是 属性 。 
V 提示 
口 可 以 把 对 象 和 属性 看 做 名 词 ， 把 方法 看 做 动词 。 前 者 是 东西 ,后 者 是 这 些 东西 可 以 完成 的 活动 
或 对 它们 执行 的 操作 。 


1.7.4 将 对 象 、 属 性 和 方法 组 合 在 一 起 


可 以 将 对 象 、 属 性 和 方法 组 合 在 一 起 ， 从 而 更 好 地 描述 对 象 或 过 程 。 在 JavaScript 中 ， 这 些 成 分 
1 点 号 分 隔 ( 就 像 因 特 网 地 址 中 的 那样 )。 这 称 为 点 号 语法 (dot syntax )。 下 面 是 按 这 种 方式 编写 的 对 
象 及 其 属性 的 一 些 示例 : 
























































bicycle.wheels 
cat.paws. front. left 
computer.drive.dvd 
document. images .name 
window. status 


下 面 是 按照 点 号 语法 编写 的 对 象 及 其 方法 的 一 些 示 例 : 


cat.purr() 
document .write() 
forms .elements.radio.click() 
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1.7.5 DOMIN eS 





































































































在 网 页 上 ， 组 成 页 面 (或 文档 ) 的 对 象 被 组 织 (Sie es Ee 
在 一 个 树 型 结构 中 。 在 构建 HTML 页 面 之 前 , 你 一 。 | ms = 
定 要 了 解 这 种 结构 。 页 面 的 顶级 包含 在 chtml> 标 签 ee ow a 
中 ， 在 其 中 会 找到 <head> 和 <body> 标 签 ， 而 其 他 标 | | 
签 包含 在 这 两 个 标签 中 ， 依 次 类 推 。 某 些 浏览 器 可 由 ewm 
以 显示 这 种 树 型 结构 ， 如 图 1-6 所 示 。JavaScript 将 E 
文档 树 中 的 每 一 项 都 当做 对 象 ,可 以 使 用 JavaScript VE" 
操纵 这 些 对 象 。 用 来 表示 文档 中 对 象 的 标准 模型 就 i-a 
称 为 DOM ( Document Object Model ). lov. e 

| wees l 

树 中 的 每 个 对 象 也 称 为 酝 的 节点 (node 。 可 以 图 16 可以 使 用 DOM inspector (Firefox 的 个 





使 用 JavaScript 修改 树 的 任何 方面 , 包括 添加 、 访 问 、 
修改 和 删除 树 上 的 节点 。 树 上 的 每 个 对 象 是 一 个 节 
点 。 如果 节 点 包含 HTML 标签 , 那么 它 就 称 为 元 素 节 
点 (element node )， 否 则 ， 就 称 为 文本 节点 (text node), “4%, 元素 节点 可 以 包含 文本 节点 。 这 就 是 日 前 
关于 DOM 和 节点 需要 知道 的 所 有 知识 ， 在 本 书 中 (尤其 是 第 10 章 ) 会 看 到 关于 它们 的 更 多 信息 。 


1.8 ”处 理事 件 


事件 (event) 是 用 户 在 访问 页 面 时 执行 的 操作 。 提 交 表单 和 在 图 像 上 移动 鼠标 就 是 两 种 事件 。 

JavaScript 使 用 称 为 事件 处 理 程序 (event handler ) 的 命令 来 处 理事 件 。 用 户 在 页 面 上 的 操作 会 触 
发 脚本 中 的 事件 处 理 程序 。 表 1-1 列 出 了 最 常用 的 12 种 JavaScript 事件 处 理 程序 。 在 第 8 章 中 ， 我们 
会 讨论 其 他 更 高 级 的 事件 处 理 程序 。 








插件 ) 查看 文档 的 树 型 结构 。 在 Safari 和 
TE 中 也 有 相似 的 特性 





























表 1-1 事件 处 理 程序 



















































































事 ff 它 处 理 什么 
onabort 用 户 终止 了 页 面 的 加 载 
onblur 用 户 离 开 了 对 象 
onchange 用 户 修改 了 对 象 
onclick 用 户 单 击 了 对 象 
onerror 脚本 遇 到 了 一 个 错误 
onfocus 用 户 激活 了 对 象 
onload 对 象 完 成 了 加 载 
onmouseover 鼠标 指针 移动 到 对 象 上 
onmouseout 鼠标 指针 离开 了 对 象 
onselect 用 户 选 择 了 对 象 的 内 容 
onsubmit 用 户 提交 了 表单 
onunload 用 户 离开 了 页 面 


























8 $13 Tf JavaScript 


























例如 ， 猫 就 可 以 通过 执行 purr ( 打 呼 噜 ) 和 stretch (ARRUE ) 操作 来 处 理 onpetting ( 亲热 ) 
事件 。 
在 JavaScript 中 ， 如 果 用 户 单 击 了 一 个 按钮 ,那么 onclick 事件 处 理 程序 会 注意 到 这 一 操作 ， 并 








执行 分 配给 它 的 任务 。 

在 编写 脚本 时 , 不 必 预 测 出 用 户 可 能 采取 的 所 有 操作 , 只 需 处 理 那 些 你 希望 提供 特殊 处 理 的 事件 。 
例如 ,如 果 没 有 onload 事件 处 理 程序 ， 页 面 也 会 顺利 地 加 载 。 但 是 ， 如 果 和 希望 在 加 载 页 面 时 触发 一 个 
脚本 ， 就 要 使 用 onload 命令 。 


1.9 值 和 变量 


在 JavaScript 中 ， 一 段 信 息 就 是 一 个 值 (value) 。 值 有 不 同 的 类 型 ， 大 家 最 熟悉 的 类 型 是 数字 。 
字符 串 〈string) 值 是 包围 在 引号 中 的 一 个 或 多 个 单词 。 表 1-2 列 出 了 JavaScript 值 的 其 他 类 型 。 


表 1-2 值 类 型 






































类 型 描 述 m Bil 
数字 任何 数字 值 3.141592654 
字符 串 引号 中 的 字符 "Hello, world!" 
布尔 值 ( Boolean ) true 或 false true 
空 值 (null) 空 且 无 含义 
对 象 与 对 象 相关 联 的 任何 值 
函数 函数 返回 的 值 














变量 (variable) 是 用 来 保存 值 的 。 例 如 ， 变 量 myName 被 赋值 为 字符 串 "Dori"。 编 写 这 一 赋值 的 
一 种 方式 是 myName="Dori"。 等 号 可 以 读 作 “设置 为 ”。 换 句 话 说， 变量 myName 现在 包含 值 "Dori"。 
V 提示 
O JavaScript 是 区 分 大 小 写 的 。 这 意味 着 myname 与 myName 并 不 相同 ， 也 与 MyName 不 相同 。 
口 变量 名 不 能 包含 空格 或 其 他 标点 符号 ， 也 不 能 以 数字 开头 。 它 们 还 不 能 是 JavaScript 保留 字 之 
一 。 附 录 B 列 出 了 JavaScript 保留 字 。 


1.9.1 操作 符 


操作 符 (operator) 是 用 来 操作 变量 的 符号 。 你 应 该 已 经 熟悉 简单 算术 中 的 操作 符 ， 加 号 和 减 号 就 
是 操作 符 。 表 1-3 列 出 了 大 多 数 常 见 的 操作 符 。 


表 1-3 操作 符 












































te E 符 作 H 
x+y (RF) 将 x Ally 相 加 
x + y (FE) 将 x 和 yy 拼接 在 一 起 


x-y 从 x 中 减 去 y 
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CH) 

HR E 符 f 用 
x *y Vf x All y FARE 
x/y Té x BREA y 
x % y x Ally WFR (ED x BRDA y 的 余数 ) 
XH ++X 给 x 加 1 (相当 于 x = x + 1) 
X--,--X 给 x 减 1( 相 当 于 x = x - 1) 
-x x 的 相反 数 


v 提示 

O x++ 和 ++x 都 是 给 x 加 1， 但 是 它们 并 不 相同 。 前 者 在 完成 赋值 之 后 再 递增 x， 而 后 者 正 相 反 。 
例如 ,如果 x 是 5，y=x++ 会 将 y 设置 为 5，x 设置 为 6; 而 y=++x 会 将 x 和 y 都 设置 为 6。 递减 
操作 符 -- 的 工作 方式 与 它 相 似 。 

口 如 果 在 将 两 个 值 相 加 时 混合 使 用 数字 和 字符 串 ， 那 么 结果 是 一 个 字符 串 。 例 如 ，"cat"+5 的 结 


果 是 "cat5"。 


1.9.2 ”赋值 和 比较 


在 将 一 个 值 放 进 变量 中 时 ,就 是 将 这 个 值 赋 给 这 个 变量 ,这 个 任务 要 使 用 赋值 操作 符 来 完成 。 例 
如 ， 使 用 等 号 操作 符 进 行 赋值 ， 比 如 hisName="Tom"。 表 1-4 列 出 了 所 有 的 赋值 操作 符 。 












































表 1-4 赋值 

im 值 ft 用 

x=y 将 x 设置 为 y 的 值 
X y 相当 于 x = x+y 
x= y 相当 于 x = x - y 
x #= y 相当 于 x = x * y 
x /= y 相当 于 x =x / y 
x %= y 相当 于 x = x % y 











除 等 号 之 外 ,其 他 赋值 操作 符 都 是 用 来 修改 变量 值 的 简写 形式 。 例 如 ，x=x+5 的 简写 形式 是 x+=5。 
为 清楚 起 见 ， 本 书 中 的 大 多 数 地 方 都 使 用 比较 长 的 形式 。 


1.9.3 比较 


常常 需要 对 两 个 变量 的 值 进行 比较 ,或 者 将 一 个 变量 的 值 与 一 个 字面 值 ( 即 输入 表达 式 中 的 值 ) 
进行 比较 ,例如 ,可 能 希望 将 周 中 日 的 值 与 "Tuesday" 进 行 比较 ,这 可 以 通过 检查 todaysDate=="Tuesday" 
来 完成 。 比 较 操 作 符 的 完整 列表 见 表 1-5。 
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#1-5 比较 
作 A 





v 提示 





如 果 x Fly 相等， 那么 返回 true 

WR x 和 yy 完全 相同 ， 那么 返回 true 
如 果 x 和 yy 不 等 ,那么 返回 true 

如 果 x 和 y 不 完全 相同 ， 那 么 返回 true 
如 果 x 大 于 y， 那 么 返回 true 
q 
i 
q 
q 





























WR X 大 于 等 于 y， 那 么 返回 true 
IR x 小 于 y， 那 么 返回 true 
WR x 小 于 等 于 y， 那 么 返回 true 

IA x Aly 都 是 true， 那 么 返回 true 
WOR x Ky 之 一 是 true， 那 么 返回 true 
如 果 x 是 false， 那 么 返回 true 
























































O 如 果 对 字符 串 进行 比较 ， 那 么 要 知道 “a” 大 于 “A”,“abracadabra” 小 于 “be”。 


1.10 ”编写 对 JavaScript 友好 的 HTML 


因为 将 使 用 JavaScript 操纵 文档 中 的 对 象 ， 所 以 希望 以 适当 的 方式 编写 HTML， 使 脚本 能 够 轻松 
地 处 理 HTML。 这 基本 上 意味 着 要 编写 现代 的 符合 标准 的 HTML， 并 使 用 CSS 将 文档 的 结构 与 它 的 





表现 分 隅 开 。 















































我 们 说 “现代 的 HIML” 的 意思 不 仅仅 指使 用 validatorw3.org 上 的 Web 工具 进行 W3C 检验 ,还 





应 该 提前 考虑 可 能 对 页 画 











i 进行 什么 操作 ， 并 添加 适当 的 标签 和 属性 ， 使 JavaScript 能 够 轻松 地 访问 对 








Bo 需要 哪些 标记 呢 ? 很 高 兴 你 这 么 问 。 


1.10.1 结构、 表现 和 行为 
CSS 是 一 种 用 于 Web 的 标准 布局 语言 ,可 以 控制 版 面 \ 颜 色 以 及 元 素 和 图 像 的 大 小 和 位 置 -HTML 


文档 应 该 利用 外 部 样式 表 来 定义 文档 中 使 用 的 样式 。JavaScript 也 应 该 放 在 外 部 文档 中 ， 这 个 文档 应 














该 只 包含 JavaScript 代码 。 
按照 这 种 方式 进行 分 离 ， 站 点 将 包含 以 下 3 种 文本 文件 。 





























O HTML: 包含 页 面 的 内 容 和 结构 。 
口 CSS: 控制 页 面 的 外 观 和 表现 。 
口 JavaScript: 控制 页 面 的 行为 。 

















如 果 这 么 做 ， 对 站 点 进行 修改 就 会 很 容易 ， 其 至 修改 全 站 点 范围 的 效果 也 很 容易 。 


1.10.2 div 和 span 














如 果 你 习惯 于 传统 的 HTML 风格 ， 比 如 将 所 有 东西 都 放 在 表格 中 并 使 用 分 隔 线 GIF 来 形成 想 要 
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的 布局 ， 那 么 一 些 概念 对 你 来 说 是 新 的 ， 所 以 这 里 快速 概述 一 下 。 

现在 HTML 和 XHTML 有 两 个 只 用 来 标 出 范围 的 标签 : <div> 和 <span>。 它 们 用 来 将 内 容 划分 成 
语义 性 (semantic) 的 块 ， 也 就 是 具有 相似 含义 (meaning) 的 块 。 一 个 表格 单元 格 或 段落 中 的 内 容 可 
能 具有 共同 点 ， 也 可 能 没有 ， 但 是 每 个 cdiv> 和 <span> 中 的 内 容 应 该 具有 相似 的 含义 。 

那么 ，<div> 和 <span> 有 什么 区 别 呢 ?<div> 是 一 个 块 级 (block-level ) 元 素 ， 也 就 是 说 ， 它 与 前 后 
元 素 之 间 有 物理 换行 。 但 <span> 不 是 块 级 的 ， 它 是 行内 的 (inline )， 所 以 可 以 将 它 应 用 于 句子 中 的 一 
个 短语 。 

你 不 需要 抛弃 原来 掌握 的 HTML 知识 ! 但 是 要 掌握 这 两 个 标签 , 你 会 吃惊 地 发 现 会 经 常 需要 使 用 
它们 。 





























1.10.3 class 和 id 


在 HTML 文档 中 , 将 内 容 分 隔 为 这 些 有 意义 的 块 。 但 是 在 此 之 后 , 仍然 需要 标识 出 那些 需要 修改 
其 表现 或 行为 的 内 容 片段 。 为 此 ， 主 要 使 用 两 个 属性 : class 和 id。CSS 和 JavaScript 都 可 以 利用 这 
些 属性 。CSS 样式 表 在 规则 中 使 用 这 些 属性 定义 页 面 的 外 观 ， 而 JavaScript 文件 在 代码 中 使 用 这 些 属 
性 来 影响 页 面 上 元 素 的 行为 。 
O 类 (class) 标识 出 可 能 会 多 次 使 用 的 元 素 。 例 如, 假设 你 要 为 电影 院 编写 一 个 页 面 。 可 以 为 电 

影 标题 定义 一 个 类 ， 然 后 通过 这 个 类 指定 标题 应 该 是 14 像素 、 粗 体 和 深蓝 色 的 。 


.movieTitle { 
font: bold 14px; 
color: #000099; 


} 
应 该 将 页 面 上 的 每 个 电影 标题 包围 在 一 个 标签 中 ， 并 指定 这 个 标题 类 型 的 class 属性 ， 如 下 所 示 : 


<p>We're currently showing <span class="movieTitle">The Aviator</span> and <span class="movieTitle"> 
一 The Outlaw</span>.</p> 


O id 标识 出 的 元 素 对 于 文档 是 唯一 的 。 例 如 ， 如 果 在 页 面 上 电影 院 的 名 称 只 出 现 一 次 ， 那 么 可 
以 使 用 id 创建 一 个 样式 规则 ， 定 义 电影 院 名 称 的 外 观 是 什么 样 的 ， 如 下 所 示 : 


#theaterName { 
font: bold 28px; 
color: #FF0000; 


} 
要 显示 电影 院 的 名 称 时 ， 只 需 在 受 影 响 的 标签 中 添加 这 个 id 属性 : 
<h1 id="theaterName">The Raven Theater Presents:</h1> 


上 面 示 例 中 用 于 CSS 的 手段 也 可 以 应 用 于 JavaScript。 在 给 div 和 span (或 任何 其 他 元 素 ) 分 配 
了 class 和 id 之 后 ， 就 可 以 修改 这 些 元 素 : 不 但 可 以 用 CSS 修改 它们 的 外 观 ， 还 可 以 用 JavaScript 
修改 它们 的 行为 。 本 书 的 其 余部 分 主要 讨论 这 个 主题 。 
v 提示 
O 有 些 人 可 能 会 在 CSS 中 使 用 # 和 .时 出 现 混淆 ,因为 他 们 想 不 起 哪个 符号 用 于 class, BEARES 
用 于 id。 我 们 的 记忆 方法 是 : 在 给 定 的 页 面 上 ， 一 个 id 只 能 出 现 一 次 。“1” 是 一 个 数字 ， 而 
Fes (#4) 也 称 为 数字 符 ， 所 以 这 个 符号 用 于 id. 
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Microsoft Word 这 样 的 字 处 理 程序 ， 


Mac 上 ， 可 以 使 用 TextEdit， 
Unix fL2$ E, Emacs 是 最 好 的 文本 编辑 需 之 一 。 
顺利 地 将 文件 上 传 到 Web 服务 器 。 


E! BBEdit File Edit Text View Search Markup Window ý  ** Help- 


1.11 要 使 用 什么 工具 














因为 JavaScript 只 是 纯 文本 ,所 以 可 以 使 用 几乎 任何 文本 编辑 器 来 编辑 JavaScript。 甚 至 可 以 使 用 


但 是 一 定 要 确保 Word 将 文件 保存 为 Text Only， 而 不 是 采用 它 自 





己 的 文件 格式 。HTML、JavaScript 和 CSS 文件 必须 是 纯 文本 格式 的 , 这 样 Web 浏览 需 才能 理解 它们 。 


最 好 是 使 用 以 纯 文 本 作为 标准 格式 的 程序 。 在 Windows 上 ， 
但 是 专业 人 员 喜 欢 Bare Bones 软件 公司 开发 的 BBEdit ( 见 图 1-8 )。 在 





或 js 保存 纯 文本 文件 ， 这 样 才能 








本 Untitled - Notepad (lB) 








File Edit Format View Help 
window. onload = initAll; 


function inital] { 
allLinks = document. getelementsByTagName("a"); 


for (var i-0; i«allLinks.length; i++) { 
if [NN className, indexof ("menuLink") > -1) { 
d allLinks[i].onclick = togglemenu; 


H 
} 


function togglevenu() ( 
Startmenu = this, href, lastindexof ("/")+1; 
Var stopMenu = this. href, lastindexo 
var thisMenuName = this. href. substring(startMenu, stopMenu) 


var thismenu = document. gete Tenentsyrd(thisMenunane). style 
thisMenu. display 


return false; 








= (thismenu. display == "block") ? : "block" 

















1-7 Windows 7 上 的 记事 本 


还 可 以 使 用 某 种 WYSIWYG ( What You See Is What You Get, 


许多 人 使 用 记事 本 ( 见 图 1-7 )。 在 


无 论 你 使 用 什么 程序 ， 不 要 忘记 用 扩展 名 .html、.css 








scriptOG js 








window.onload - initForms; 


function inttForns () { 


} 


function validForm() { 


jy, Last Saved: 7/17/06 5:03:26 pm 
sx File Path: ~/Documents/Writing/Jav...QS/site/chap08/script06.js 


script06js : | (no symbol selected) = 


for (var i=0; i< document.forms.length; i++) 
document. fornsti]- onsubmit = function() Cfeturn validForm();) 
) 


var allTags = document.getElementsByTagName("*") ; 


for (var i=; i<allTags.length; i++) { 
validTag(allTags[i]); 


H 
return false; 
function validTag(thisTag) { 
ar ss = ""; 
var allClasses = thisTag.className.split(" "); 
for (var j-0; j<allClasses.length; j++) { 
outClass += validBasedOnClass(allClasses[j]) + 
thisTag.className = outClass; 
if (outClass.indexOf(" invalid") > -1) { 
invalidLabel(thisTag. parentNode) ; 
thisTag. focus() ; 


if (thisTag.nodeName == 
thisTag.select(); 


"INPUT") { 


} 


function Vatidpssedünc lass (ehtsClaes) { 
var classBack 





switch(thisClass) { 


se "" 
case "invalid 

break; 
case 

i [t TvalidPhone (thi sTag. value)) classBack = "invalid 
defau 


lassBack += thisClass; 
return classBack; 


m val {aehone (phon) { 2 
= /^NOQOdQGIN)?IN NN. J9?680)) [NM 1?04(4)$/; fg 


C EIS 





JavaScript = Western (Mac OS Roman) : Unix (LF) € 


Al 1-8 Mac OSX 上 的 BBEdit 





所 见 即 所 得 ) 的 HTML 编辑 器 ， 比 














如 Adobe Dreamweaver。 只 需 切 换 到 HTML Source 模式 ， 就 可 以 编写 脚本 了 。 


V 提示 








Dreamweaver CSS: Visual QuickStart Guide 一 书 。 














O 如 果 你 是 Mac HF , 那么 试 试 Bare Bones 软件 公司 开发 ( www.barebones.com ) 的 TextWrang- 
ler。 它 的 特性 不 如 BBEdit 那么 全 面 ， 但 是 它 有 一 个 大 优点 
口 如 果 你 想 了 解 如 何在 Dreamweaver 中 使 用 代码 工具 的 更 多 内 容 ， 推 荐 你 阅读 我 们 著 的 


它 是 免费 的 。 





JT oa 











身 够 了 ， 现 在 该 编写 脚本 了 。 在 本 章 中 ， 你 将 学 习 把 脚本 放 在 HTML 中 的 什么 位 置 ， 如 何 
AAA 在 脚本 中 编写 注释 ， 让 自己 在 过 了 一 段 时 间 之 后 仍然 能 够 轻松 地 理解 这 些 脚 本 ， 以 及 如 何 
使 用 脚本 与 用 户 进 行 通信 。 还 会 看 到 如 何 使 页 面 自动 地 转 到 另 一 个 页 面 (这 称 为 重 定向 , redirection )。 
我 们 开始 吧 ! 
目前 需要 了 解 的 HTML 基础 知识 见 表 2-1。 


表 2-1 目前 需要 了 解 的 HTML 知识 













































































标 签 属 性 a x 
html 包含 网 页 的 HTML 部 分 
head 包含 网 页 的 页 头 部 分 
script 包含 网 页 的 脚本 或 对 外 部 脚本 文件 的 引用 。 脚 本 常常 是 JavaScript， 但 不 一 定 
脚本 所 用 的 编程 语言 。 必 须 有 的 属性 
src 外 部 脚本 的 位 置 
title 包含 网 页 的 标题 
body 包含 网 页 的 内 容 
h1...h6 这 些 标签 的 内 容 作为 标题 信息 。hd 是 最 大 尺寸 的 标题 ，h6 是 最 小 尺寸 的 标题 
a 链接 到 另 一 个 网 页 
href 指定 当 单 击 链接 时 ， 用 户 应 该 转 到 哪里 
id 分 配给 链接 的 id 


2.1 将 脚本 放 在 哪里 


脚本 可 以 放 在 HTML 页面 上 的 两 个 位 置 : <head> 和 </head> 标 签 之 间 ( 称 为 头 脚本 , header script ), 
或 者 cbody> 和 </body> 标 签 之 间 ( 体 脚本 ，body script )。 脚 本 2-1 是 体 脚 本 的 一 个 示例 。 
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脚本 2-1 脚本 总 是 需要 包围 在 cscript> 和 </script> HTML 标签 之 间 


<!DOCTYPE html» 
<html> 
<head> 

«title»My first script</title> 
</head> 
<body> 

«hi» 

«script» 


document.write("Hello, world!"); 


</script> 
«/h1» 
«/body» 
«/html» 


有 一 个 标 出 脚本 的 HTML 容器 标签 ， 这 个 标签 以 <script> 开 头 ， 以 </script> 结 束 。 
> 编写 第 一 个 脚本 
































1. <script> (& My first script - Windows Internet Explorer. [o-o 

这 是 script 开始 标签 ， 告 诉 浏览 器 后 面 的 代码 是 GJO- [e normas... v |4 | x | [IG] Soge 
JavaScript 而 不 是 HTML。 Favorites ofp — | 8 My first script 

2. document.write("Hello, world!"); à 

这 是 JavaScript 的 第 一 行 : 它 获 得 文档 窗口 并 在 其 Hello, world! 
写 入 "Hello, world!", WA) 2-1 所 示 。 请 注意 这 一 行 末尾 
的 分 号 〈(; )， 这 告诉 浏览 需 的 JavaScript HEREA —1155 @ Internet | Protected Mode: On R100% ~ 
束 了 。 除 了 极 少 的 例外 情况 ， 本 书 中 每 行 JavaScript 代码 

图 2-1 “ Hello, world!” 示 例 是 编程 图 书 中 











A paw 
A alae 的 传统 示例 ， 我 们 也 不 想 违反 传统 
3. </script> 


这 结束 JavaScript， 并 告诉 浏览 器 后 面 的 代码 是 HTML, 

V 提示 

O script 标签 的 language 属性 和 type 属性 ( 这 里 没有 使 用 ) 已 经 废弃 了 ,这 意味 着 W3C ( 负责 
的 标准 组 织 ) 已 经 将 这 个 属性 标记 为 在 标准 的 未 来 版 本 中 不 必 支 持 的 属性 , 但 还 有 不 少 旧 上 脚本 
仍 在 使 用 它 。 

D 如 果 每 一 行 上 只 有 一 个 语句 , 那么 在 JavaScript 行 的 末尾 使 用 分 号 是 可 选 的 。 为 了 使 代码 清晰 ， 

我 们 在 本 书 中 坚持 使 用 分 号 (; ), 由 于 同样 的 原因 , 我 们 建议 你 养 成 在 代码 中 包含 分 号 的 习惯 。 

O 对 于 本 书 中 的 大 多 数 地 方 ， 我们 在 代码 解释 中 省 略 了 <script> 标 签 。 可 以 看 到 ， 在 脚本 代码 

仍然 有 这 个 标签 ， 而 且 仍然 需要 它 ， 但 是 我 们 不 会 反复 解释 它 。 

口 一 个 页 面 上 可 以 有 任意 数量 的 <script> 标 签 (因此 有 多 个 脚本 )。 


2.2 ”关于 函数 


在 讲述 下 一 个 示例 之 前 ， 你 需要 了 解 一 下 函数 ， 在 编写 JavaScript 时 常常 要 用 到 它们 。 函 数 
(function ) 是 一 组 执行 某 一 任务 的 JavaScript 语句 。 每 个 函数 必须 有 一 个 名 称 〈 除 了 一 个 非常 少见 的 
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例外 ， 这 会 在 本 书后 面 讨论 )， 并 可 被 脚本 的 其 他 部 分 调用 。 

在 脚本 运行 期 间 ， 可 以 根据 需要 调用 函数 任意 次 。 例 如 ， 假 设 你 已 经 获得 了 用 户 在 表单 中 输入 的 
一 些 信息 ,并 使 用 JavaScript 将 它 保存 起 来 了 (在 第 6 章 中 提供 了 关于 这 类 问题 的 更 多 信息 )。 如 果 需 
要 一 次 又 一 次 地 使 用 此 信息 ,那么 可 以 在 脚本 中 反复 使 用 相同 的 代码 。 但 是 ， 更 好 的 方法 是 将 这 段 代 
码 编写 成 函数 ， 然 后 在 需要 的 时 候 调 用 这 个 函数 。 

函数 由 单词 function 加 上 函数 名 组 成 。 函 数 名 后 面 是 圆 括号 , 再 后 面 是 左 花 括号 。 组 成 函数 内 容 
的 语句 出 现在 后 面 的 行 上 ， 然 后 用 右 花 括号 结束 这 个 函数 。 函 数 的 形式 如 下 所 示 : 



































function saySomething() { 
alert("Four score and seven years ago"); 
} 
注意 到 alert 所 在 的 行 缩 进 了 吗 ? 这 会 会 使 代码 更 易 读 。 第 一 个 花 括 号 和 最 后 一 个 花 括 号 ( 你 会 注 
意 到 这 两 行 没有 缩 进 ) 之 间 的 所 有 语句 都 是 函数 部 分 。 这 就 是 目前 需要 知道 函数 方面 的 内 容 。 在 下 一 
章 和 后 续 儿 章 中 ， 会 介绍 函数 方面 的 更 多 内 容 。 


2.3 ”使 用 外 部 脚本 


在 HTML 页 面 上 直接 使 用 脚本 ( 就 像 前 面 的 示例 那样 ) 的 问题 是 脚本 只 能 供 当 前 页 面 使 用 。 因此， 
这 种 脚本 有 时 候 称 为 内 部 脚本 ( internal script ) 但 是 , 经 常 希 望 让 多 个 HTML 页 面 共享 一 个 脚本 。 这 
要 通过 包含 外 部 脚本 (external script ) 的 引用 来 实现 , 也 就 是 只 包含 JavaScript 的 单独 文件 。 这 些 外 部 
文件 称 为 .js 文件 ， 因 为 无 论 它 们 叫 什么 ,文件 名 都 应 该 以 ,js 后 组 结尾 。 各 个 页 面 只 需 在 script 标签 
vis src 属性 ， 就 可 以 调用 ,js 文件 。 

这 就 大 大 减少 了 每 个 页 面 上 的 代码 ， 更 重要 的 是 ， 这 会 使 站 点 更 容易 维护 。 当 需要 对 脚本 进行 修 

改 时 ， 只 需 修改 .js 文件 ， 所 有 引用 这 个 文件 的 HTML JA na 到 修改 的 影响 。 

在 第 一 个 外 部 脚本 示例 中 ， 脚 本 2-2 包含 引用 外 部 文件 的 HIML ， 脚 本 2-3 是 外 部 JavaScript 文件 。 


脚本 2-2 ”这 段 简单 的 HTML 在 script 标签 中 包含 对 外 部 JavaScript 文件 的 引用 

































































<!DOCTYPE html» 
<html> 
<head> 
<title>My second script</title> 
«script src="scripto2.js"></script> 
</head> 
<body> 
«hi id="helloMessage"> 
</h1> 
</body> 
</html> 


脚本 2-3 第 一 个 外 部 JavaScript 文件 
window.onload = writeMessage; 


function writeMessage() { 
document.getElementById("helloMessage").innerHTML = "Hello, world!"; 
} 
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1. «script src="scripto2.js"> 

这 一 行 在 脚本 2-2 中 。 在 script 标签 中 添加 src 属性 会 使 浏览 器 寻找 引用 的 文件 。 产 生 的 网 页 看 
起 来 就 像 将 脚本 直接 放 在 页 面 的 script 标签 中 一 样 ， 而 实际 上 脚本 放 在 外 部 的 .js 文件 中 。 

使 用 外 部 脚本 只 需要 这 一 行 。 接 下 来 ,我 们 看 看 这 个 脚本 中 的 内 容 。 

2. window.onload = writeMessage; 

在 脚本 2-3 中 ， 这 一 行 的 第 一 部 分 window.onload 是 一 个 事件 处 理 程序 ， 我 们 在 第 1 章 中 讨论 过 
了 。 等 号 后 面 是 一 个 函数 名 writeMessage。 这 一 行 的 意思 是 “ 当 窗 口 完 成 加 载 时 ， 运 行 writeMessage 

3. function writeMessage() { 

这 一 行 创建 writeMessage() KZ 

4. document.getElementById("helloMessage").innerHTML = "Hello, world!"; 







































































再 看 看 脚本 2-2， 就 会 发 现 有 一 个 <h1> 标 签 ， 它 的 id 为 porem 
helloMessage。 在 后 面 你 会 学 到 关于 id 的 更 多 知识 ， 目 前 只 O Boxe M T 
= : isi 、 ~ O nttp/^ vx. ~| Sx. co 
需 知 道 id 是 它 所 属 的 元 素 在 页 面 上 的 唯一 标识 符 。 换 句 话 My third script | +| = 

















说 ， 在 给 定 的 页 面 上 ， 只 能 有 一 个 元 素 具 有 这 个 特定 的 ido 

这 使 JavaScript 很 容易 通过 使 用 getElementById() 方 法 来 获 Hello, world! 

得 和 操作 这 个 元 素 。innerHTML 属性 仅仅 是 获得 等 号 右边 的 字 

AB, 并 将 它 直 接 放 到 页 面 中 , 就 像 是 我 们 在 HTML 中 编写 oo 

了 这 个 字符 串 一 样 。 所 以 , 这 行 JavaScript 代码 的 意思 是 “ 获 , UIT 

得 字符 串 “Hello, world!’ ,并 将 它 放 在 文档 中 名 为 helloMessage 图 2-2 M CaN 
= » H = A $ JR JR — TAN P — FF , 

ee J 结果 如 图 2-2 所 示 ， 也 和 图 2-1 一 样 。 但 这 种 方式 更 好 

Y 提示 

OQ 支持 外 部 JavaScript 文件 的 浏览 器 包括 : 微软 的 IE 4 及 更 高 版 本 、Netscape 3 及 更 高 版 本 ， 以 

及 此 后 发 布 的 几乎 所 有 浏览 器 ， 包 括 Firefox, Safari 和 chrome 等 现代 浏览 器 。 

口 有 时 候 使 用 外 部 JavaScript 文件 这 种 方式 来 对 用 户 隐 藏 JavaScript。 但 是 , 如 果 用 户 的 技术 经 验 
很 丰富 ， 有 能 力 检查 他 们 的 浏览 器 缓存 文件 ( 浏览 需 已 经 看 到 的 所 有 东西 都 存储 在 那里 )， 那 
么 这 种 方法 是 无 效 的 。 

O 在 脚本 2-1( 以 及 本 书 的 先前 版 本 ) 中 ， 我 们 使 用 document .write() 将 信息 插入 HTML 页 面 。 
在 这 一 版 中 , 我 们 主要 使 用 设置 innerHTML 的 方法 , 因为 它 更 通用 。 一些 人 反对 使 用 innerHTML 

属性 ， 因 为 W3C 已 经 废弃 了 它 。 但 是 ， 即 使 是 这 些 心 存疑 虑 的 人 也 得 承认 ， 它 是 最 简单 的 可 
以 跨 浏览 器 工作 的 方法 ， 所 以 我 们 在 本 书 中 主要 采用 这 种 方法 。 第 10 章 将 介绍 在 HTML 页 面 
上 添加 或 修改 信息 的 “正式 ”方法 。 

O 如 果 你 以 前 见 过 函数 ， 那 么 可 能 会 认为 步骤 2 中 的 writeMessage 引用 应 该 是 writeMessage()。 
这 种 想法 是 不 对 的 ， 因 为 这 是 两 种 不 同 的 东西 : 带 圆 括号 的 函数 名 意味 着 正在 调用 这 个 函数 ; 
WRIA RR S 〈 就 像 这 里 的 情况 )， 就 是 将 它 赋值 给 事件 处 理 程序 ， 以 便 在 此 事件 发 生 时 运 
行 它 。 
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2.4 在 脚本 中 添加 注释 


养 成 在 脚本 中 添加 注释 的 习惯 是 一 种 很 好 的 做 法 。JavaScript 不 会 将 插入 的 注释 解释 为 脚本 命令 。 
尽管 在 编写 脚本 时 ， 它 可 能 看 起 来 非常 清晰 , 但 是 如 果 你 过 儿 个 月 再 看 这 个 脚本 ,就 可 能 觉得 它 很 星 
汲 。 注 释 有 助 于 解释 你 为 什么 按照 某 种 方式 解决 问题 。 对 脚本 进行 注释 的 另 一 个 原因 是 ， 别 人 可 能 希 
望 重用 和 修改 你 的 脚本 ， 注 释 对 他 们 也 有 帮助 。 

脚本 2-4 给 出 了 两 种 脚本 注释 的 示例 。 第 一 种 用 于 比较 长 的 多 行 注 释 ， 第 二 种 显示 如 何 编写 单 
行 注释 。 


脚本 2-4 这 里 的 代码 演示 如 何 给 脚本 加 有 助 于 你 和 别人 理解 代码 的 注释 











/* 
This is an example of a long JavaScript comment. Note the characters at the beginning and ending of the 
comment. 
This script adds the words "Hello,world!" into the body area of the HTML page. 

*/ 


window.onload - writeMessage; // Do this when page finishes loading 


function writeMessage() ( 
// Here's where the actual work gets done 


document.getElementById("helloMessage").innerHTML - "Hello, world!"; 


注意 ,我 们 没有 给 出 这 个 示例 的 HTML， 因 为 它 与 脚本 2-2 是 相同 的 。 从 现在 开始 ， 如 果 HTML 
与 前 一 个 示例 相 比 没有 变化 ， 我 们 就 不 再 重复 显示 它 了 。 





D 对 脚本 进行 注释 











1. /* 
This is an example of a long JavaScript comment. Note the characters at the beginning and 
—ending of the comment. 
This script adds the words "Hello, world!" into the body area of the HTML page. 


对 于 多 行 的 注释 ， 行 开头 的 / 闻 F JavaScript 忽略 此 后 的 所 有 内 容 ， 直 到 注释 的 末尾 为 止 。 
2.7 
这 是 注释 的 末尾 。 
3. window.onload = writeMessage; 
// Do this when page finishes loading 
function writeMessage() { 


// Here's where the actual work gets done 
document.getElementById ("helloMessage").innerHTML = "Hello, world!"; 














这 里 是 与 前 一 个 示例 一 样 的 脚本 ， 但 是 加 上 了 单行 的 注释 。 单 行 注释 可 以 单独 占据 一 行 ， 也 可 以 

跟 在 代码 行 后 面 。 在 单行 注释 后 面 ， 同 一 行 上 不 能 再 编写 代码 了 ; 多 行 注释 不 能 与 代码 同 在 一 行 上 。 
是 的 ,我们 也 厌倦 了 “Hello, world!” 示 例 ， 但 这 是 传统 ， 所 有 编程 图 书 都 以 这 个 示例 开始 讲解 。 
现在 就 来 看 点 儿 新 鲜 的 东西 吧 ! 
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25 向 用 户 发 出 警告 


JavaScript 的 主要 用 途 之 一 是 向 浏览 站 点 的 人 提供 反馈 。 可 以 创建 一 个 弹出 的 警告 窗口 ， 向 用 户 
提供 关于 页 面 必须 了 解 的 重要 信息 。 

在 用 户 界 面 设计 中 , 简单 就 是 好 。 例如 , 你 可 以 用 一 大 片 警 告 文本 和 巨大 的 动画 引起 用 户 的 注意 ， 
但 是 这 就 有 点 儿 物 极 必 反 了 。 相反, 应 该 像 脚本 2-5 (HTML, 它 仅仅 调用 外 部 脚本 ) 和 脚本 2-6 ( Java- 
Script) 这 样 ， 创 建 一 个 漂亮 、 简 洁 的 警告 窗口 。 现 在 ， 你 知道 我 们 为 什么 是 技术 作家 而 不 是 设计 人 
员 了 。 






































脚本 2-5 ”这 个 示例 的 HTML 包含 cscript> 和 <noscript> 标 签 


<!DOCTYPE html» 
<html> 
<head> 
«title»My JavaScript page</title> 
«script src="script04.js"></script> 
</head> 
<body> 
<noscript> 
<h2>This page requires JavaScript.</h2> 
</noscript> 
</body> 
</html> 


脚本 2-6 ”警告 对 话 框 帮 助 你 与 用 户 进 行 通信 


alert("Welcome to my JavaScript page!"); 


> 向 用 户 发 出 警告 








C) alert("Welcome to my JavaScript page!"); 
是 的 ， 这 就 是 所 需 的 所 有 代码 ， 其 效果 如 图 2-3 所 示 。 把 希望 显示 的 文本 放 在 alert()77 
法 的 直 引 号 中 就 行 了 。 


oo My Javascript pags = Microsoft Internet Explorer Eq 
«d Scri 


| me The page at http://www.javascriptworld.com says: | 
e Welcome to my JavaScript page! t Welcome to my JavaScript page! 
CAN 











Co 
0K 
Windows Internet Explorer xs) 
http:/ /www.javascriptworld.com 
i Welcome to my JavaScript page! 的 Welcome to my javascript pagel 


x) 











图 2-3 ”这 个 脚本 只 弹出 一 个 对 话 框 。 显 示 的 4 个 示例 从 上 到 下 依次 是 在 Mac OS X 上 的 Firefox 2, 
微软 XP 上 的 琅 6、 微 软 Vista 上 的 下 8 和 MacOSX 上 的 Safari 3 中 的 对 话 框 的 外 观 
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V 提示 

O 在 大 多 数 JavaScript 警告 框 中 ,会 有 某 种 迹象 ， 让 用 户 知道 这 个 警告 框 是 由 JavaScript 命令 弹 
出 的 。 这 是 一 个 安全 特性 ， 用 来 防止 恶意 的 脚本 编写 者 欺骗 用 户 。 无 法 用 代码 控制 这 个 特性 。 = 
例如 , 在 Mac OS X FY Safari E, 它 显 示 打开 这 个 警告 的 站 点 的 URL, 如 图 2-3 所 示 。Windows 
和 Mac 上 的 Firefox 采用 同样 的 做 法 。 在 正 6 中 ， 窗 口 标题 是 Microsoft Internet Explorer, IE 7 
及 更 高 版 本 却 显 示 Windows Internet Explorer。 真有 意思 ! 

O 这 里 还 使 用 了 <noscript> 标 签 。 在 不 支持 JavaScript 的 浏览 器 ( 老式 浏览 器 和 关闭 了 JavaScript 
功能 的 浏览 器 ) 上 ， 会 显示 一 条 消息 ， 它 指出 这 个 页 面 需要 JavaScript. 


2.6 ”确认 用 户 的 选择 


向 用 户 提供 信息 是 有 用 的 ， 但 有 时 候 还 希望 从 用 户 那里 获得 信息 。 脚 本 2-7 演示 如 何 查 明 用 户 对 
你 的 问题 的 回答 。 这 个 脚本 还 引入 了 条 件 〈conditional ) 的 概念 ， 在 这 里 脚本 进行 一 次 测试 ， 并 根据 
测试 的 结果 执行 不 同 的 操作 。 


脚本 2-7 可 以 根据 用 户 对 提示 的 反应 给 出 相应 的 回复 


if (confirm("Are you sure you want to do that?")) { 
alert("You said yes"); 

































































else { 
alert("You said no"); 


关于 条 件 的 更 多 信息 


条 件 语句 分 成 3 部 分 : if 部 分 ( 在 这 里 执行 测试 )、then 部 分 ( 在 这 里 放置 在 ieee true 时 要 执 
行 的 脚本 命令 ) 和 可 选 的 else 部 分 (这 里 包含 在 测试 结果 不 为 true 时 要 执行 的 脚本 命令 )。 在 if 部 
分 中 ,我 们 要 测试 的 内 容 放 在 圆 括号 中 ， 其 他 两 部 分 的 内 容 分 别 包 含 在 花 括 号 中 。 


> 确认 用 户 的 选择 

1. if (confirm("Are you sure you want to do that?")) { 

confirm() 方 法 有 一 个 参数 ( 向 用 户 询问 的 问题 ) 并 根据 用 户 的 响应 返回 true 或 false, 如 图 2-4 
所 示 。 




















Windows Internet Explorer [EJ Windows Internet Explorer 区 到 Windows Internet Explorer [5:3] 


o Are you sure you want to do that? i You said yes i You said no 

















1 | s Cancel | | OK | | OK | 











图 2-4 可 以 看 到 ， 你 可 以 获得 用 户 操作 的 结果 ， 并 在 警告 框 中 确认 此 结果 。 最 上 























面 的 图 向 用 户 提出 一 个 问题 ， 单 击 OK 或 Cancel 按钮 的 结果 显示 在 下 面 
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2. alert("You said yes"); 

如 果 用 户 单 击 OK 按钮 ， 那 么 confirm() 返 回 true， 因 此 出 现 的 警告 框 中 显示 “You said yes". nj 
以 看 到 ， 这 是 代码 的 then 部 分 ， 尽 管 JavaScript 中 并 没有 then 操作 符 。 花 括号 就 标 出 了 then 部 分 的 
范围 。 

3.} 

这 个 花 括号 结束 当 confirm() 返 回 true 值 时 执行 的 代码 。 

4.else { 

这 里 开始 仅 当 用 户 单 击 Cancel 按钮 时 执行 的 代码 部 分 。 

5.alert("You said no"); 

如 果 用 户 单 击 Cancel 按钮 ， 那 么 confirm() 返 回 false， 并 显示 消息 “You said no”. 

6. } 

这 个 花 括号 结束 整个 if/else 条 件 语句 。 

v 提示 

口 可 以 在 then 和 else 部 分 的 花 括 号 中 放任 意 数量 的 语句 。 
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不 存在 唯一 正确 的 方式 

编写 任何 脚本 都 有 许多 种 方式 ， 并 且 都 能 实现 同样 的 效果 。 例 如 ， 当 (上 且 仅 当 ) 代码 块 中 只 有 
一 条 语句 时 ， 条 件 语 句 中 就 不 需要 使 用 花 括 号 。 

另外 ， 还 有 一 种 可 以 蔡 代 条 件 语句 的 方法 ， 其 形式 如 下 : 

(condition) ? truePart : falsePart; 
这 相当 于 

if (condition) { 

truePart; 


} 
else { 
falsePart; 


} 
同样 的 简写 方法 也 可 以 用 来 设置 变量 ， 例 如 : 
myNewVariable = (condition) ? trueValue : falseValue; 
这 相当 于 
if (condition) { 
myNewVariable = trueValue; 


} 
else { 
myNewVariable = falseValue; 


} 

并 不 要 求 必须 将 花 括 号 放 在 行 尾 或 行 首 ，true fe false 代码 块 的 缩 进 也 不 是 必需 的 。 这 些 都 是 
样式 问题 ， 对 于 你 最 合适 的 样式 就 是 正确 的 样式 。 

在 本 书 中 的 大 多 数 地 方 ， 为 了 保持 代码 清晰 ， 我 们 在 示例 中 包含 花 括 号 ， 而 且 选 用 比较 长 的 条 
件 语句 形式 。 
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2.7 ”提示 用 户 


有 时 候 , 不 是 仅 希 望 用 户 回 答 Yes/No， 而 是 希望 得 到 更 特定 的 响应 。 在 这 种 情况 下 ， 可 以 像 脚本 = 
2-8 那样 问 一 个 问题 〈 带 默认 回答 )， 然 后 接收 回复 。 图 2-5 显示 其 结果 。 
脚本 2-8 可 以 使 用 对 话 框 询 问 用 户 并 处 理 回 复 

var ans = prompt("Are you sure you want to do that?",""); 


if (ans) { 
alert("You said " + ans); 














else { 
alert("You refused to answer"); 
| J The page at http://www.javascriptworld.com says: | | o> The page at http://www.javascriptworld.com says: | 
c) Are you sure you want to do that? You said You bet | do, pal 





You bet I do, pall 


Cancel ) ( OK 








图 2-5 “可 以 提示 用 户 输 入 一 个 文本 字符 串 ， 然 后 对 这 个 字符 串 进行 操作 


1. var ans = prompt("Are you sure you want to do that?",""); 

这 里 声明 了 一 个 变量 (在 第 1 章 中 讨论 过 )。 我 们 使 用 var 关键 字 声明 变量 。 在 这 个 示例 中 ， 变 
量 称 为 ans ， 它 被 赋值 为 prompt() 的 结果 ， 也 就 是 用 户 在 提示 对 话 框 中 输入 的 文本 。 

传递 给 prompt() 方 法 的 是 由 逗号 分 隔 的 两 段 信息 〈 正式 的 术语 是 参数 ): 向 用 户 询问 的 问题 和 黑 
认 回答 。 这 个 方法 返回 用 户 的 响应 或 null。 当 用 户 单 击 Cancel 按钮 ， 或 当 没 有 默认 回答 而 用 户 单 击 了 
OK 按钮 ， 再 或 当 用 户 清除 了 默认 回答 并 单 击 了 OK 按钮 时 ， 就 会 出 现 null。 有 些 浏览 器 会 在 提示 对 
话 框 上 显示 一 个 关闭 控件 ， 使 用 这 个 控件 也 会 返回 null 25 

2.if (ans) { 

alert("You said " + ans); 





















































这 个 条 件 语句 使 用 了 刚才 设置 的 变量 。 如 果 ans 存在 (也 就 是 说 ， 用 户 输入 了 响应 )， 那 么 会 弹 
出 一 个 警告 对 话 框 ， 其 中 显示 “You said ”( 请 注意 这 个 文本 字符 串 末 尾 的 额外 空格 ) 和 ans 值 的 拼 
接 。 


3. else { 
alert("You refused to answer"); 








如 果 ans 是 null ( 因为 用 户 没有 在 提示 对 话 框 中 输入 任何 内 容 ， 或 者 单 击 了 Cancel 按钮 ) 那么 
执行 条 件 语句 的 else 块 ， 并 弹出 警告 对 话 杠 





W 
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v 提示 
O 使 用 var 有 如 下 两 种 作用 。 
m 它 让 JavaScript 创建 一 个 变量 ( 也 就 是 在 内 存 中 为 这 个 新 对 象 留 出 一 些 空间 )。 
m 它 定 义 变量 的 作用 域 ( scope )， 也 就 是 JavaScript 在 哪些 地 方 需要 知道 这 个 对 象 的 内 容 
( 见 下 面 的 补充 内 容 “ 作 用 域 是 什么 ”)。 如 果 变 量 是 在 一 个 函数 中 创建 的 , 那么 它 是 这 
个 函数 的 局 部 (local ) 变量 ,其 他 函数 不 能 访问 它 。 如 果 它 是 在 任何 函数 之 外 创建 的 ， 
它 就 是 全 局 的 ( global )， 脚 本 中 的 所 有 代码 都 可 以 访问 它 。 在 这 个 脚本 中 ， 我 们 创建 
了 ans 全 局 变量 。 
O 在 某 些 浏览 器 中 ， 如 果 省 略 prompt 的 第 二 个 参数 (默认 响应 )， 那 么 一 切 正 常 。 但 是 在 其 他 浏 
览 器 中 ， 出 现 的 提示 窗口 中 会 显示 默认 值 “undefined”。 解 决 方案 是 总 是 包含 某 个 默认 值 ， 即 
使 是 空 字 符 串 也 可 以 ( 就 像 脚本 2-8 中 一 样 )。 
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作用 域 是 什么 

在 世界 上 的 大 多 数 地 方 ， 如 果 提 到 Broadway (大道 ， 或 特 指 百老汇 )， 人 们 都 知道 你 指 的 是 纽 
约 的 一 条 大 街 。 尽 管 这 条 大 街 本 身 在 纽约 ， 但 是 全 世界 的 人 都 知道 你 的 意思 。 可 以 认为 Broadway 
这 个 词 是 全 局 的 。 

但 是 ,如果 你 在 加 利 福 尼 亚 的 圣 和 迭 蕊 ， 当 你 提 及 Broadway 时 ， 人 们 会 认为 Broadway 指 的 是 当 
地 市 区 的 一 条 主要 大 街 。 这 是 一 个 局 部 值 。 在 圣 失 区 ， 你 指 的 是 局 部 意义 的 Broadway， 还 是 全 局 
意义 的 Broadway， 这 一 点 并 不 明确 ， 因 此 可 能 导致 混 消 。 

如 果 你 在 圣迭戈 ,那么 默认 的 是 局 部 意义 。 在 指 全 局 意义 时 ,必须 明确 地 说 “纽约 的 Broadway”. 
在 圣 和 迭 蕊 之 外 的 地 方 ， 人 们 首先 会 想到 纽约 的 百老汇 ， 除 非 他 们 本 地 也 有 名 为 Broadway 的 大 街 。 

一 条 大 街 的 作用 域 ( 也 就 是 通常 所 说 的 范围 ) 是 一 个 地 区 , 在 这 个 地 区 中 这 条 大 街 是 默认 意义 ; 
也 就 是 说 ， 如 果 没 有 加 上 其 他 修饰 词 ， 那 么 提 到 这 条 大 街 的 名 字 ， 人 们 就 会 自动 地 想到 这 条 大 街 。 
Zik X 8 Broadway 的 作用 域 是 局 部 的 , 即 圣 和 迭 苞 市 内 和 附近 的 郊区 。 纽 约 的 Broadway 的 作用 域 是 
全 局 的 ， 即 世界 上 任何 地 方 的 人 都 知道 你 指 的 是 什么 地 方 。 

在 JavaScript 代码 中 ， 要 想 避 免 与 变量 作用 域 有 关 的 问题 和 混淆 ， 最 容易 的 方法 是 避免 使 用 同 
名 的 两 个 变量 在 不 同 的 地 方 做 不 同 的 事 。 如 果 必 须 使 用 同名 的 变量 ， 就 一 定 要 弄 清 变量 的 作用 域 ! 


2.8 用 链接 对 用 户 进行 重 定 向 


可 以 根据 用 户 是 否 打 开 了 JavaScript 功能 ， 无 颖 地 对 用 户 进 行 重 定向 (redirection )， 也 就 是 将 用 
户 转 到 另 一 个 页 面 。 这 个 示例 演示 如 何 将 重 定向 功能 嵌入 链接 中 。 我 们 将 使 用 两 个 HTML 页 面 和 一 个 
JavaScript 文件 。 第 一 个 HTML 页 面 ( 见 脚本 2-9 ) 回 用 户 显 示 链 接 。 脚 本 2-10 是 JavaScript 文件 ， 脚 
本 2-11 是 在 用 户 启用 了 JavaScript 功能 的 情况 下 用 户 被 重 定向 到 的 HTML 页 面 。 当 用 户 单 击 这 个 链接 
( 见 图 2-6 ) 时 ， 根 据 他 们 是 否 打开 了 JavaScript 功能 ， 将 被 带 到 两 个 页 面 之 一 。 
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Welcome to our site - = 
File Edit View History Bookmarks Tools Help 
O- QU X A (Li http/dldropbox.con zy. ~| |$- Google 2| 





|) Welcome to our site [+] f- 





Welcome to our site... c'mon in! 








图 2-6 这 个 页 面 上 的 链接 包含 重 定向 代码 
脚本 2-9 这 个 HTML 页 面 基 于 链接 对 用 户 进行 重 定向 


<!DOCTYPE html» 
<html> 
<head> 
«title»Welcome to our site</title> 
«script src-"script07.js"»«/script» 
«/head» 
«body» 
«h2 class-"centered"» 
«a href-"scripto4.html" id-"redirect"» Welcome to our site... c'mon in!«/a» 
</h2> 
</body> 
</html> 


脚本 2-10 GH RDA BE RA ETS, FP ANE ASPB ERT 


window.onload = initAll; 





function initAll() ( 
document.getElementById("redirect").onclick = initRedirect; 
} 


function initRedirect() { 
window.location = "jswelcome. html"; 
return false; 


} 
脚本 2-11 这 是 启用 了 JavaScript 功能 的 用 户 将 看 到 的 HTML 页 面 


<!DOCTYPE html» 
<html> 
<head> 
<title>Our site</title> 
</head> 
<body> 
«hi»Welcome to our web site, which features lots of cutting-edge JavaScript</h1> 
«/body» 
«/html» 
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p^ 对 用 户 进行 重 定 向 

1.«a href="scripto4.html" id="redirect">Welcome to our site... c'mon in!</a> 

在 脚本 2-9 中 ， 这 是 用 户 单 击 的 链接 。 如 果 用 户 没有 启用 JavaScript 功能 并 单 击 链 接 ， 那 么 他 们 
会 按照 通常 的 href 路 径 前 进 , 到 达 如 图 2-7 所 示 的 页 面 。 如 果 用 户 启用 了 JavaScript 功能 并 单 击 链接 ， 
那么 脚本 〈 见 步骤 4 ) 就 会 发 挥 作用 并 加 载 一 个 新 页 面 。 

















My JavaScript 
File Edit View History Bookmarks Tools Help 
» C fiy [| http://dl.dropbox.con Y7 ~| |$- Google P 
L.] My JavaScript page [e+ 


This page requires JavaScript. 





Done 

















图 2-7 如 果 你 认为 JavaScript 是 站 点 的 必要 部 分 ， 就 用 这 个 消息 向 用 户 说 明 情 况 


























2.window.onload = initAll; 

这 行 代码 在 脚本 2-10 中 。 当 完成 页 面 加 载 时 ， 它 会 触发 initAll() PAA. 

3. function initAll() { 
document.getElementById("redirect").onclick = initRedirect; 


} 


这 个 函数 告诉 id 为 redirect 的 元 素 ( 也 就 是 步骤 1 中 的 链接 ), 在 它 被 单 击 时 应 该 调用 initRedi- 
rect () PAA. 
4. function initRedirect() { 


window. location = "jswelcome.html"; 
return false; 








如 果 调 用 这 个 函数 , 它 就 将 window. location( BI Và dir ZI B) OU ) 设 置 为 一 个 新 页 面 。return 
false 表示 停止 对 用 户 单 击 的 处 理 ， 这 样 就 不 会 加 载 href 指向 的 页 面 。 
这 种 方式 最 酷 的 特色 是 ,我 们 完成 了 重 定向 而 用 户 根本 不 会 意识 到 发 生 了 重 定向 。 他 们 仅仅 是 根 
据 自 己 的 情况 到 达 了 两 个 页 面 之 一 。 如 果 他 们 启用 了 JavaScript 功能 ， 就 会 到 达 图 2-8 Pras hy W É 
V 提示 
OQ 初 看 上 去 , 似乎 可 以 只 在 全 局 范围 设置 onclick 处 理 程序 , 即 在 加 载 页 面 时 , 但 是 不 能 这 么 做 。 
浏览 器 有 可 能 还 没有 遇 到 id 为 redirect 的 元 素 ， 尤 其 是 对 于 复杂 的 大 页 面 ， 在 这 种 情况 下 ， 
JavaScript 就 不 能 设置 onclick 处 理 程序 。 所 以 , 我 们 必须 等 待 页 面 完 成 加 载 ， 这 要 通过 onload 
实现 。 
口 请 记 住 ， 一 些 用 户 习惯 在 鼠标 位 于 链接 上 时 看 到 链接 指向 的 页 面 ， 不 喜欢 被 自动 转 到 其 他 
页 面 。 
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Our site - Mozilla = 
File Edit View History Bookmarks Tools Help 
»ce f$ |] http://di.dropbox.con YY ~| $$- Googie P 
| j Our site [+ | - 





Welcome to our web site, which 
features lots of cutting-edge 
JavaScript 








Done 





图 2-8 支持 JavaScript 功能 的 浏览 器 会 显示 这 个 页 面 


2.9 使 用 JavaScript 改进 链接 


有 时 候 ， 在 用 户 单 击 链接 之 后 ， 但 是 在 浏览 器 转 到 链接 的 目的 地 之 前 ， 和 希望 执行 某 种 操作 。 典 型 
的 示例 是 ， 在 用 户 进 入 站 点 上 的 特定 页 面 之 前 发 出 警告 ， 或 者 在 用 户 离开 站 点 时 给 出 明确 的 提示 。 在 
这 个 示例 中 ,我 们 将 弹出 一 个 警告 对 话 框 ， 然 后 再 转 到 最 终 的 目的 地 。 脚 本 2-12 显示 HIML， 脚 本 
2-13 显示 需要 对 前 面 的 脚本 做 的 少量 修改 。 


脚本 2-12 与 平常 一 样 ，HTML 在 链接 标签 中 包含 JavaScript 可 以 使 用 的 id 


<!DOCTYPE html» 
<html> 
<head> 
«title»Welcome to our site</title> 
«script src="script08.js"></script> 
«/head» 
«body» 
«h2 class-"centered"» 
Hey, check out «a href-"http://www.pixel.mu/" id-"redirect"» my cat's Web site</a>. 
«/h2» 
«/body» 
</html> 


脚本 2-13 ”链接 改进 脚本 


window.onload = initAll; 














function initAll() { 
document.getElementById("redirect").onclick - initRedirect; 


} 


function initRedirect() { 
alert("We are not responsible for the content of pages outside our site"); 
window. location = this; 
return false; 
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> 改进 链接 


1. Hey, check out «a href="http://ww.pixel.mu/" id="redirect">my cat's Web site</a>. 

脚本 2-12 中 的 这 行 代码 显示 链接 , 其 中 包括 链接 目的 地 的 href 和 链接 的 id, 脚本 2-13 将 使 用 这 
个 id。 页 面 见 图 2-9。 

2.alert("We are not responsible for the content of pages outside our site"); 


在 单 击 链接 之 后 ， 会 显示 这 个 警告 ， 如 图 2-10 所 示 。 
































‘@ Welcome to our site - Windows Internet Explorer Cees 
OOE m javas ~| 4| x | [IG] Googte 4 
Ip Favorites g — (f Welcome to our site EmulatelE] y v |i} Page v 





Hey, check out my cat's Web site. 





Windows Internet Explorer Ex 





i We are not responsible for the content of pages outside our site 











- : OK 
Done @ Internet | Protected Mode: On & 1006 ~ 























图 2-9 单 击 这 个 链接 就 会 把 用 户 重 定向 到 猫 的 图 2-10 ”如果 用 户 使 用 支持 JavaScript 的 浏览 带 ， 那 
Web 站 点 么 会 在 离开 站 点 时 看 到 这 个 警告 消息 





3. window. location = this; 

这 一 行将 浏览 需 | this 包含 这 个 链接 。 目 前 ， 只 需 将 this 看 
做 一 个 容器 ， 本 书后 面 会 详细 介绍 它 。 如 果 你 现在 就 想 知道 更 多 的 信息 ,那么 可 以 阅读 后 面 的 补充 内 
X “this 是 什么 ”。 当 用 户 到 达 最 终 目的 地 时 , 页 面 像 图 2-11 这 样 ( 至 少 , 使 用 猫 的 网 页 作为 目的 地 )。 

















Piel the Cat- 
File Edit View History Bookmarks Tools Help 

"c AY (http://www. pirel mu wy -- P] 
| [Ù Pixel the Cat I7 


My name is Pixel. I'm a cat. | 
This is my page. 


My hobbies: A 


* Sleeping 
Eating 








if my dish has wet 


ly why my dish doesn't 


n itis pointed 
to me that I have a full dish of dry 





Aren't | just the cutest cat ever? 














Done u 

















图 2-11. 在 这 个 示例 中 ， 这 只 猫 的 页 面 实际 上 是 由 我 们 维护 的 
( 你 不 会 认为 它 自己 会 编写 页 面 吧 ) 
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this 是 什么 
在 这 个 示例 中 使 用 了 this， 但 是 this 究竟 是 什么 还 不 很 清楚 。 
JavaScript 关键 字 this 使 脚本 能 够 根据 使 用 这 个 关键 字 的 上 下 文 将 值 传 递 给 函数 。 在 这 个 示例 
P, this 是 在 一 个 由 标签 的 事件 触发 的 函数 中 使 用 的 ， 所 以 this 是 一 个 链接 对 象 。 在 后 面 的 示例 
中 ， 将 看 到 在 其 他 地 方 使 用 this， 你 应 该 能 够 根据 使 用 它 的 上 下 文 判断 出 this 是 什么 。 


V 提示 

O 你 可 能 会 注意 到 ,代码 中 并 没有 引用 特定 的 网 页 一 一 这 是 this 关键 字 的 作用 之 一 。this 替 我 们 完 
成 的 工作 之 一 是 从 HTML 链接 获得 URL ( 也 就 是 a 标签 的 href 属性 值 )。 由 于 采用 了 这 种 方式 ， 
如 果 以 后 将 脚本 2-12 改 为 指向 其 他 页 面 而 不 是 猫 页 面 ， 就 不 必修 改 脚本 2-13。 实 际 上 ， 可 以 让 
Web 站 点 上 的 所 有 链接 都 调用 这 个 相同 的 脚本 ， 这 一 行 代 码 都 会 自动 获得 相应 的 href 值 。 

O 如 果 前 面 的 提示 解释 得 还 不 够 ， 可 以 这 样 考虑 : 按照 这 种 方式 ， 可 以 使 用 WYSIWYG 编辑 央 
修改 你 的 HTML 页 面 ,而 且 修 改 者 可 以 完全 不 了 解 JavaScript。 只 要 他 们 只 是 修改 HTML 页 面 ， 
就 不 会 破坏 你 的 脚本 。 

O 这 对 你 来 说 还 不 够 吗 ? 还 有 一 个 好 处 : 如 果 用 户 的 浏览 器 不 理解 JavaScript， 那 么 它 只 会 加 载 
HTML 页 面 ， 而 不 显示 警告 。 当 他 们 单 击 链 接 时 , 会 像 一 般 情况 下 那样 加 载 页 面 : 不 会 发 生 错 
误 ， 也 不 会 提示 “你 必须 换 用 其 他 浏览 器 *" ,没有 任何 问题 。 

D 这 种 编程 方式 称 为 无 干扰 脚本 编程 (unobtrusive scripting )， 它 将 代码 与 HTML 分 隔 开 ， 从 而 使 
这 两 者 都 更 加 灵活 。 如 果 想 了 解 关 于 Web 编程 的 更 多 术语 , 请 阅读 后 面 的 补充 内 容 “ 常 见 术语 ”。 






































































































































常见 术语 
使 用 JavaScript 一 段 时 间 后 ， 你 可 能 被 不 断 增 加 的 术语 弄 得 头 午 ， 其 中 许多 术语 在 根本 上 是 关 
于 JavaScript 是 什么 以 及 不 是 什么 的 。 下面 快速 总 结 一 下 术语 问题 ,帮助 你 洪 清 概念 。( 如 果 你 不 觉 
得 这 是 个 迫切 的 问题 ， 那 么 和 一 些 脚 本 开发 人 员 聊 一 会 儿 吧 ! ) 
口 JavaScript。 尽 管 正 式 地 说 这 个 术语 是 属于 AOL 的 (AOL 收购 Netscape )， 但 是 它 常 常用 作 所 
有 与 JavaScript 类 似 的 脚本 技术 ， 比 如 微软 的 JScript。 我 们 在 本 书 中 也 活用 这 种 做 法 "。 
口 DHTML。 即 Dynamic HTML (动态 HTML) ， 但 是 在 现实 中 ,， 它 的 实际 意义 取决 于 说 话 的 人 。 


Web 标准 项 目 将 DHTML 定义 为 :“…… 一 种 过 时 的 脚本 技术 , 它 的 主要 特征 是 它 会 改变 某 些 
元 素 的 样式 属性 ， 以 及 使 用 浏览 器 特定 的 DOM document.layers 和 document.all” 473% 7s 
术语 我 们 已 不 再 使 用 了 。 


ODOM 脚本 编程 (DOM scripting) 。 一 种 使 用 JavaScript 编写 网 页 的 方式 ， 按 照 这 种 方式 ， 
代码 只 通过 操纵 W3C DOM 来 修改 页 面 ( 也 就 是 说 ,不 使 用 专 有 的 、 非 标准 或 已 废弃 的 属性 )。 
脚本 2-10 和 脚本 2-13 引用 document.getElementById("redirect").onclick, 这 就 是 DOM JEg 
本 编程 的 做 法 。 





(D 从 技术 上 说 ，JavaScript 是 ECMAScript 语言 标准 的 实现 。Adobe 的 ActionScript 是 该 标准 的 另 一 种 实现 。 





编者 注 
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口 无 干扰 脚本 编程 (unobtrusive scripting) : 一 种 使 用 JavaScript 编写 网 页 的 方式 ， 按 照 这 种 
方式 ， 网 页 的 行为 和 它 的 内 容 是 分 隔 开 的 一 一 也 就 是 说 ，HTML 在 一 个 文件 中 ，JavaScript 
在 另 一 个 文件 中 。 这 是 一 种 最 佳 实践 ， 它 的 作用 就 像 是 对 HTML fe CSS 进行 分 隔 ， 即 页 面 
的 表现 方式 ( CSS ) 在 一 个 文件 中 ， 内 容 (HTML) 在 另 一 个 文件 中 。 
O 渐进 增强 。 另 外 ， 如 果 代 码 编写 好 之 后 ， 没 有 JavaScript 支持 (或 使 用 功能 比较 差 的 浏览 器 ) 
的 访问 者 也 能 够 使 用 站 点 的 所 有 功能 ， 只 是 用 户 体验 稍 差 ， 那 么 也 用 “无 干扰 脚本 编程 ”这 个 
词 来 描述 这 个 站 点 。 脚 本 2-10 和 脚本 2-13 也 是 渐进 增强 的 例子。 在 这 些 示例 中 ， 没 
有 JavaScript 支持 的 访问 者 也 可 以 单 击 链接 ， 但 是 如 果 有 JavaScript 支持 ， 用 户 体验 会 更 丰富 。 
在 本 书 中 ,我 们 要 使 用 许多 种 脚本 技术 。 尽 管 我 们 建议 采用 无 干扰 脚本 编程 /渐进 增强 方式 ( 而 
且 尽 可 能 演示 这 种 做 法 )， 但 是 我 们 也 知道 你 (作为 刚 入 门 的 脚本 开发 人 员 ) 主要 需要 理解 和 支持 
比较 老式 但 容易 编写 的 代码 。 在 真实 环境 中 ， 我 们 也 知道 最 直接 的 方式 往往 就 是 最 简单 的 方式 。 所 
以 我 们 在 脚本 2-3 中 使 用 了 innerHTML， 尽 管 它 不 属于 W3C DOM. 


2.10 使 用 多 级 条 件 


有 时 候 , 在 一 个 条 件 测 试 中 需要 两 个 以 上 的 选择 , [X then 和 else MBN. SEA) LAKE ifi 
句 ， 但 更 简单 的 方法 常常 是 使 用 switch/case 语句 。switch/case 构造 允许 针对 多 个 值 检查 一 个 变量 。 
如 图 2-12 Bras, 这 个 脚本 根据 用 户 单 击 的 按钮 , 在 警告 对 话 框 中 返回 3 段 不 同 的 总 统 语录 之 一 。 脚 本 
2-14 是 HTML, 这 相当 简单 。 脚 本 2-15 是 JavaScript， 它 使 用 switch/case 构造 区 分 不 同 的 总 统 语录 。 


























i — 
(& Switch/Case handling - Windows Inter... | — || (Sj [ss] 





i A B http javas.. v | $5 | x | IG] Goo 


Favorites 998 | @ Switch/Case handling 








. A Windows Internet Explorer E] 
Famous Presidential Quotes 





| Lincoln | Kennedy || Nixon | i Four score and seven years ago... 
































@ Internet | Protected Mode: On R100% v | ok | 
Windows Internet Explorer es] Windows Internet Explorer [ES] 
i Ask not what your country can do for you... i I am not a crook! 
LOK j Le |j 
图 2-12 在 最 上 面 的 窗口 中 ， 调 用 3 个 按钮 的 函数 会 产生 下 面 3 个 对 话 框 所 示 的 3 种 
































不 同 响应 


2.0 使 用 多 级 条 件 


29 








脚本 2-14 这 段 HTML 建立 多 级 条 件 的 页 函 


<!DOCTYPE html» 

<html> 

<head> 
<title>Switch/Case handling</title> 
<script src-"script09.js"»«/script» 

</head> 

<body> 

<h2>Famous Presidential Quotes</h2> 

<form action="#"> 
<input type="button" id="Lincoln"value="Lincoln"> 
<input type="button" id="Kennedy"value="Kennedy"> 
<input type="button" id="Nixon" 

value="Nixon"> 

</form> 

</body> 

</html> 


脚本 2-15 ”这 种 条 件 语句 允许 针对 多 种 可 能 性 进行 检查 


window.onload = initAll; 











function initAll() { 
document.getElementById("Lincoln").onclick = saySomething; 
document .getElementById("Kennedy").onclick = saySomething; 
document .getElementById("Nixon").onclick = saySomething; 


} 


function saySomething() { 
switch(this.id) { 
case "Lincoln": 
alert("Four score and seven years ago..."); 
break; 
case "Kennedy": 
alert("Ask not what your country can do for you..."); 
break; 
case "Nixon": 
alert("I am not a crook!"); 
break; 
default: 
} 
} 


=> 使 用 switch/case 语句 








1. window.onload = initAll; 
当 加 载 页 面 时 ， 调 用 initAll() PR. 


2. function initAll() { 
document.getElementById ("Lincoln").onclick - saySomething; 
document.getElementById ("Kennedy").onclick = saySomething; 
document.getElementById("Nixon").onclick = saySomething; 





在 这 个 函数 中 ， 我 们 为 页 面 上 的 每 个 按钮 设置 了 onclick 处 理 程序 。 因 为 在 HTML 中 设置 了 id 



































使 用 getElementByValue() 调 用 ， 那 么 就 不 必 设置 id 属性 。 











属性 和 value 属性 ， 所 以 可 以 使 用 getElementById() 设 置 事件 处 理 程序 。 如 果 有 value 属性 ， 就 可 以 
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3. function saySomething() { 
这 一 行 开 始 saySomething() PRÉC, 
4. switch(this.id) { 
this 对 象 的 id 用 作 switch() 的 参数 。 这 个 值 将 决定 执行 以 下 case 语句 中 的 哪 一 个 。 
5. case "Lincoln": 

alert("Four score and seven years ago..."); 

break; 
如 果 this 对 象 的 id 是 Lincoln， 那 么 显示 这 个 警告 消息 。 如 果 用 户 单 击 Lincoln， 就 会 进入 这 里 
的 代码 。 但 是 , 在 这 里 已 经 执行 了 我 们 需要 的 操作 ， 所 以 我 们 希望 离开 这 个 switch 语句 ， 为 此 ， 需 要 
使 用 break 语句 。 如 果 没 有 break， 就 会 继续 执行 下 面 的 所 有 代码 。 尽 管 在 某 些 情况 下 继续 执行 下 面 
的 分 支 是 我 们 需要 的 效果 ， 但 是 在 这 个 示例 中 不 应 该 这 么 做 。 

6. case "Kennedy": 

alert("Ask not what your country can do for you..."); 










































































break; 
如 果 用 户 单 击 Kennedy， 就 会 进入 这 个 case 9t. 
7. case "Nixon": 

alert("I am not a crook!"); 



































break; 
最 后 ,如 果 用 户 单 击 Nixon, 就 会 进入 这 里 , 这 里 弹出 另 一 个 警告 对 话 框 , 然后 退出 switch 语句 。 
8. default: 

















如 果 用 户 的 输入 与 上 面 的 条 件 都 不 匹配 ， 那 么 就 会 执行 这 里 的 代码 。 也 就 是 说 ， 如 果 switch 值 
与 任何 case 值 都 不 匹配 ， 就 会 进入 default 部 分 。default 块 是 可 选 的 ， 但 是 包含 default 块 是 一 种 
好 的 编程 习惯 ， 可 以 以 防 万 一 。 在 这 个 脚本 中 ， 这 里 没有 要 执行 的 代码 ， 因 为 我 们 应 该 不 可 能 进入 
default 部 分 。 

9.) 

这 个 右 花 括号 结束 switch 语句 。 

v 提示 

Q 也 可 以 向 switch 语句 传递 字符 串 之 外 的 其 他 值 。 可 以 在 switch 语句 中 使 用 数字 值 ， 甚 至 对 数 

学 计算 的 结果 进行 评估 。 但 是 , 如 果 结 果 应 该 是 数字 , 那么 要 确保 case 语句 是 匹配 的 一 一 case 
语句 应 该 检查 数字 ， 而 不 是 字符 串 ( 例如 5， 而 不 是 “5”)。 


2.11 ”处理 错误 


即使 你 有 多 年 使 用 计算 机 的 经 验 , 但 是 你 站 点 的 许多 用 户 很 可 能 没什么 经 验 。 因 此 ， 应 该 向 他 们 
提供 有 意义 的 错误 消息 ， 而 不 是 大 多 数 浏览 器 在 拒绝 用 户 的 操作 时 返回 的 莫名 其 妙 的 消息 。 脚 本 2-16 
演示 如 何 使 用 JavaScript 的 try/throw/catch 命令 产生 友好 、 有 用 的 错误 消息 。 我 们 将 这 个 功能 放 在 一 
个 简单 的 平方 根 计 算 器 中。 
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脚本 2-16 ”这 个 脚本 用 JavaScript 适当 地 处 理 错 误 
window.onload = initAll; 


function initAll() { 
var ans = prompt("Enter a number",""); 
try { 
if (Jans || isNaN(ans) || ans<o) { 
throw new Error("Not a valid number"); 





alert("The square root of " + ans + " is " + Math.sqrt(ans)); 


} 
catch (errMsg) { 
alert (errMsg.message) ; 


} 

=> 适当 地 处 理 错 误 

1. vax ans = prompt("Enter a number", ""); 

这 是 一 个 普通 的 提示 ,我 们 把 它 存储 在 ans 变量 中 供 以 后 使 用 。 在 这 个 示例 中 ， 我 们 希望 用 户 输 
入 一 个 数字 。 如 果 用 户 确实 输入 了 合适 的 数字 ，JavaScript 就 会 显示 所 输入 数字 的 平方 根 。 

2. try { 

但 是 ， 如 果 他 们 没有 输入 数字 ( 如 图 2-13 所 示 )， 那 么 代码 能 够 捕 提 到 这 一 错误 并 显示 有 意义 的 
消息 。 即 使 用 户 在 要 求 他 们 输入 数字 时 输入 了 单词 ， 我 们 也 能 够 有 礼貌 地 发 出 提示 。 首 先 使 用 try 命 
令 。 在 这 块 代码 中 ,我们 检查 用 户 的 输入 是 否 有 效 。 


me Square Root Calculator = 






























































The page at http://www.javascriptworld.com says: | 


) Enter a number 





HELLO THERE] 


Cancel ) ok ) 
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图 2-13 ”我 们 要求 用 户 输入 数字 ， 但 是 用 户 可 能 输入 任何 内 容 ， 比 如 非 数字 项 


























3.if (!ans || isNaN(ans) || ans«o) { 
throw new Error("Not a valid number"); 
j 

我 们 要 关注 3 种 情况 : 根本 没有 输入 ; 用 户 输入 了 某 些 内 容 ， 但 不 是 数字 ; 输入 的 是 数字 , 但 它 
是 负数 ( 因为 负数 的 平方 根 是 虚数 ， 这 超出 了 这 个 示例 的 范围 )。 如 果 !ans 是 true， 就 意味 着 用 户 没 
有 输入 任何 内 容 。 内 置 的 isNaN() 方 法 检查 传递 给 它 的 参数 是 否 “ 不 是 数字 (Not a Number )”。 如 果 
isNaN() 返 回 true， 就 说 明 输 入 的 内 容 是 无 效 的 。 如 果 ans 小 于 0， 它 就 是 负数 。 对 于 以 上 任何 情况 ， 
都 希望 抛 出 一 个 错误 ， 指出 “Not a valid number ( 不 是 有 效 的 数字 )。 当 抛 出 错误 之 后 ，JavaScript 跳出 
try 块 并 寻找 对 应 的 catch i], AL, try 块 中 其 余 的 代码 都 被 跳 过 。 
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4. alert("The square root of " + ans + " is " + Math.sqrt(ans)); 


如 果 输 入 了 有 效 的 内 容 ， 就 显示 平方 根 ， 如 图 2-14 所 示 。 


TOO Square Root Calculator 











= 


The page at http://www Jjavascriptworld.com says: | 


e The square root of 256 is 16 





ono 8 6 
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图 2-14 这 是 输入 有 效 数字 时 脚本 的 结果 





5. } 

这 个 右 花 括号 结束 try 块 。 

6. catch (errMsg) { 
alert(errMsg.message); 


} 
这 是 出 现 错误 时 要 使 月 给 它 , 它 显 示 错 误 的 message 部 分 ( 见 


图 2-15 )。 如 果 没 有 抛 出 错误 ，catch 中 的 代码 就 不 会 执行 。 














The page at http:/ /www.javascriptworld.com says: 


e Not a valid number 


j 
| 
| 
| 
| 
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图 2-15 如果 输入 了 错误 的 数据 ， 就 告诉 用 户 








v 提示 
O 还 有 一 个 可 选 部 分 : 最 后 的 {} 块 。 这 个 部 分 放 在 catch 后 面 ， 无 论 try 块 是 否 抛 出 错误 ， 这 里 


包含 的 代码 都 应 该 执行 。 
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x] oom 的 作用 有 所 体会 之 后 ， 我 们 来 更 深入 地 探索 JavaScript 语言 。 在 本 章 中 ， 我 们 将 
详细 讨论 JavaScript 的 基本 元 素 并 介绍 JavaScript 语言 的 其 他 方面 ， 比 如 循环 、 数 组 和 函数 








(不 必 担 心 ， 这 里 的 内 容 并 不 难 理解 )。 




















你 还 会 学 习 如 何 使 用 JavaScript 编写 网 页 ，JavaScript 如 何 处 理 用 户 所 犯 的 错误 ， 等 等 。 





目前 需要 了 解 的 HTML 知识 见 表 


3-1, 


R 3-1 目前 需要 了 解 的 HTML 知识 











table 在 网 页 上 显示 表格 数据 
tr 在 表格 中 开始 一 行 

th 表格 中 列 的 标题 单元 格 
td 包含 表格 中 的 每 个 单元 格 











3.1 用 循环 进行 重复 操作 


在 编程 中 ， 常 常 需 要 测试 某 一 条 件 ， 并 且 根 据 需要 多 次 重复 执行 测试 。 我 们 用 一 个 例子 来 说 明 : 
在 字 人 处 理 程序 中 进行 查找 和 替换 。 查 找 一 段 文本 ,将 它 改 为 男 一 个 文本 字符 串 ， 并 对 文档 中 出 现 第 一 
个 字符 串 的 所 有 地 方 重复 这 个 过 程 。 现 在 , 假设 你 用 一 个 程序 自动 完成 这 个 任务 。 这 个 程序 要 执行 一 





















































个 循环 (loop )， 从 而 以 指定 的 次 数 重复 一 个 操作 。 在 JavaScript 中 ， 循 环 是 基本 的 编程 特性 。 





关于 循环 的 更 多 知识 





在 本 书 中 ， 我 们 最 常用 的 循环 类 型 


Ve for 循环 ， 这 种 循环 以 for 命令 开始 。 这 种 循环 使 用 一 个 计 




















数 器 〈counter )， 计 数 器 是 一 个 变量 ， 
时 就 会 结束 。 


它 最 初 是 某 个 值 CHES )。 这 种 循环 在 测试 条 件 得 不 到 满足 

















在 循环 结构 开头 的 命令 后 面 是 圆 括号 。 在 圆 括号 中 常常 有 计数 器 定义 和 递增 计数 器 的 方式 (也 就 











是 增加 计数 器 值 的 方式 )。 
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在 后 面 几 个 示例 中 ， 我 们 将 构建 一 个 简单 而 且 大 家 熟悉 的 应 用 程序 : Bingo 卡片 游戏 。 我 们 使 用 


每 个 示例 演示 JavaScript 的 不 同方 面 。 我 们 先 看 一 个 HTML SUE 
架 ( 见 图 3-1 )。 看 一 下 这 个 脚本 ， 你 会 发 现 第 一 行 包含 卡片 顶部 的 字母 ， 后 续 的 每 
。 大 多 数 单元 格 只 包含 一 个 非 中 断 空格 (使 用 HTML 实体 &nbsp; )， 但 是 第 


是 Bingo 卡片 的 框 
一 行 包含 5 个 表格 单元 格 























ij， 如 脚本 3-1 所 示 。 它 包含 的 表格 就 























三 行 包含 一 个 Free 格 ， 所 以 这 一 行 中 的 一 个 表格 单元 格 包含 单词 Free。 注 意 ， 每 个 单元 格 都 有 id 属 
性 ,脚本 使 用 这 个 属性 操纵 单元 格 的 内 容 。 id 采用 的 形式 是 squareo, square1, square2, 直到 square23, 











采用 这 种 





3-1 这 个 Bingo 卡片 已 经 随机 生成 了 许多 数字 ,但 














形式 的 原因 在 后 面 解 释 。 在 页 面 的 底部 ， 有 一 个 用 来 生成 新 卡片 的 链接 。 





OOO MakeYourOwnBingo Card 


= 





€- e- fff O Qhupivv i 


Create A Bingo Card 




















Click here to create a new card 








Done n e O 











脚本 3-1 这 个 HTML 页面 建立 Bingo 卡片 的 框架 
<!DOCTYPE html» 
<html> 
<head> 


<title>Make Your Own Bingo Card</title> 
<link rel="stylesheet" href="script01.css"> 
<script src="script01.js"></script> 


</head> 
<body> 
«hi»Create A Bingo Card</h1> 
«table» 
<tr> 
<th>B</th> 
<th>I</th> 
<th>N</th> 
<th>G</th> 
<th>0</th> 
</tr> 
<tr> 
<td id="squareO">&nbsp; </td> 
<td id="square5">&nbsp; </td> 
<td id="square10">&nbsp; </td> 
<td id="square14">&nbsp; </td> 
<td id="square19">&nbsp; </td> 


它 还 不 是 有 效 的 Bingo 卡片 
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</tr> 

<tr> 
«td id="square1">&nbsp; </td> 
<td id="square6">&nbsp; </td> 
«td id="square11">&nbsp; </td> 
«td id="square15">&nbsp; </td> 
<td id="square20">&nbsp; </td> 

</tr> 

<tr> 
<td id="square2">&nbsp; </td> 
<td id="square7">&nbsp; </td> 
<td id="free">Free</td> 
<td id="square16">&nbsp; </td> 
«td id="square21">&nbsp; </td> 

</tr> 

<tr> 
<td id="square3">&nbsp; </td> 
<td id="square8">&nbsp; </td> 
«td id="square12">&nbsp; </td> 
<td id="square17">&nbsp; </td> 
<td id="square22">&nbsp; </td> 

</tr> 

<tr> 
<td id="square4">&nbsp; </td> 
<td id="square9">&nbsp; </td> 
«td id="square13">&nbsp; </td> 
<td id="square18">&nbsp; </td> 
<td id="square23">&nbsp; </td> 
</tr> 

</table> 

<p><a href="scripto1.html" id="reload">Click here</a> to create a new card</p> 

</body> 

</html> 





脚本 3-2 是 我 们 用 来 对 Bingo 卡片 的 内 容 应 用 样式 的 CSS 文件 。 如 果 你 不 了 解 CSS， 也 不 需要 担 
心 ， 因 为 在 这 里 CSS 并 不 重要 。 对 于 其 他 Bingo 卡片 示例 ，HTML 和 CSS 页 面 没 有 变化 ， 所 以 我 们 
只 在 这 里 显示 它们 一 次 。 


脚本 3-2 这 个 CSS 文件 为 Bingo 卡片 添加 样式 


body { 
background-color: white; 
color: black; 
font-size: 20px; 
font-family: "Lucida Grande", Verdana,Arial, Helvetica, sans-serif; 





} 
h1, th { 
font-family: Georgia, "Times New Roman",Times, serif; 
} 
h1 { 
font-size: 28px; 
} 
table { 


border-collapse: collapse; 


} 
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th, td { 
padding: 10px; 
border: 2px #666 solid; 
text-align: center; 
width: 20%; 

} 

#free, .pickedBG { 
background-color: #f66; 


-winningBG { 
background-image:url(images/redFlash.gif); 














这 个 示例 演示 如 何 建立 和 使 用 循环 ， 用 随机 生成 的 数字 填充 Bingo 卡片 的 内 容 。 脚 本 3-3 包含 所 
需 的 JavaScript。 这 个 脚本 生成 的 卡片 不 是 有 效 的 Bingo 卡片 , 因为 Bingo 卡片 游戏 对 特定 列 中 的 数字 
有 一 些 限制 。 后 面 的 示例 将 对 脚本 进行 改进 ， 直 到 产生 有 效 的 Bingo 卡片 。 
脚本 3-3 ”欢迎 你 来 到 第 一 个 JavaScript 循环 


window. onload = initAll; 























function initAll() { 
for (var i-0; i<24; i++) { 
var newNum = Math.floor(Math.random() * 75) + 1; 


document.getElementById("square" + i).innerHTML = newNum; 


Bingo 卡片 中 的 内 容 

你 肯定 见 过 Bingo 卡片 ， 但 是 可 能 没有 仔细 研究 过 。 美 国 的 Bingo 卡片 是 5x5 WAH, 5 个 列 
上 标 着 B-LN-G-O， 格 子 中 包含 1 ~75 的 数字 。 正 中 间 通 常 是 一 个 空 的 格子 ， 常 常 印 着 单词 free。 
每 列 可 以 包含 的 数字 的 范围 如 下 : 
口 B 列 包含 数字 1~ 15; 
口 I 列 包含 数字 16-30; 
口 N 列 包含 数字 31-45; 
OG 列 包含 数字 46 ~ 60; 
00 列 包含 数字 61 ~75。 


> 使 用 循环 创建 表格 内 容 


1. window.onload = initAll; 

这 行 代码 在 脚本 3-3 中 。 当 窗口 完成 加 载 时 , 它 调用 initAl1() 函 数 。 使 用 事件 处 理 程序 调用 函数 
是 常用 的 做 法 。 

2. function initAll() { 

这 一 行 开始 函数 。 

3. for (var i-0; i«24; i++) { 





e e 
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这 一 行 开 始 循环 。 程 序 员 通常 使 用 变量 i 作为 循环 内 部 的 计数 带 变 量 。 首 先 ,将 i 设置 为 0。 分 
号 表示 这 个 语句 结束 了 ， 这 使 我 们 能 够 在 同一 行 上 放置 男 一 个 语句 。 下 一 部 分 的 意思 是 ,“ 如 果 i 小 
于 24， 那 么 执行 花 括号 中 的 代码 ”。 第 二 个 分 号 后 面 的 部 分 将 i 的 值 加 1。 因 为 这 是 第 一 次 用 到 递增 ， 
我 们 来 解释 一 下 。i++ 部 分 使 用 第 1 章 介 绍 过 的 ++ 操 作 符 将 i 的 值 加 1。 这 个 循环 将 重复 24 次 ， 所 以 
循环 中 的 代码 将 执行 24 次。 在 第 一 次 迭代 中 , i46 0; 在 最 后 一 次 迭代 中 ,i 是 23。 
4. var newNum = Math.floor(Math.random() * 75) + 1; ERI 
在 循环 内 部 ， 我 们 创建 一 个 新 的 变量 newNum ， 并 将 它 赋 值 为 等 号 右边 计算 的 结果 。 内 置 的 
JavaScript 命令 Math.random() 生 成 0~ 1 的 一 个 随机 数 , 比如 0.123456789。 将 Math.random() 与 最 大 
值 相 乘 (EIE, Bingo 卡片 中 的 值 是 从 1 到 75 ) 会 生成 0 到 最 大 值 之 间 的 结果 。 对 结果 进行 floor 
运算 会 获得 结果 的 整数 部 分 ， 即 0 到 (最 大 值 减 1 ) 的 整数 。 再 加 1 就 会 获得 1 到 最 大 值 的 数字 。 
5. document.getElementById("square" + i).innerHTML = newNum; 
在 这 里 ， 我 们 将 刚才 获得 的 随机 数 写 入 表格 中 。 我 们 处 理 的 元 素 的 id 属性 是 square 再 拼接 上 i 
的 当前 值 。 例 如 ， 在 循环 的 第 一 次 迭代 中 ，i 的 值 是 0， 所 以 这 一 行 处 理 id 为 squareo 的 元 素 。 这 一 
行将 squareo 对 象 的 innerHTML 属性 设置 为 newNum 的 当前 值 。 然 后 ， 因 为 我 们 还 在 循环 中 ， 步 又 4 和 
IRS 会 重复 执行 ， 直 到 整个 Bingo 卡片 填写 完毕 。 























































































































循环 的 组 成 
for 循环 有 3 个 组 成 部 分 ， 如 图 3-2 所 示 。 





i=0; i<userNum; i++ 
初始 化 限制 ” 递增 
图 3-2 循环 的 3 个 组 成 部 分 














1. 初始 化 步骤 。 在 循环 的 第 一 次 迭代 中 , 这 个 部 分 对 循环 变量 ( 在 这 个 示例 中 是 i) 进行 设置 。 

2. 限制 步骤 。 在 这 里 指出 什么 时 候 停 止 循环 。 一般人 是 从 1 数 到 10, 但 是 在 编程 语言 中 常常 
是 从 0 数 到 9。 在 这 两 种 情况 下 , 循环 中 的 代码 都 会 运行 10 K, 但 是 对 于 数组 从 0 位置 开 始 的 语言 
( 比如 JavaScript )， 后 一 种 方法 更 合适 。 这 就 是 循环 的 限制 条 件 为 “小 于 userNum” 而 不 是 “小 于 等 
于 userNum” 的 原因 。 假设 交 量 userNum 是 10, 并 且 和 希望 循环 运行 10 Ko WRA 0 数 到 9 (使 用 “小 
于 userNum” 测 试 )， 那 么 循环 运行 10 次 。 如 果 从 0 数 到 10 (使 用 “小 于 等 于 userNum” 测 试 )， 那 
么 循环 运行 11 次 。 

3. 递增 步骤 。 在 这 里 指定 在 循环 的 每 次 迭代 中 循环 变量 增加 多 少 。 在 这 个 示例 中 , 使 用 ++ 每 次 
将 的 值 加 1。 


3.2 将 值 传递 给 函 考 


常常 需要 获得 一 些 信息 并 将 它 交 给 函数 使 用 ， 这 称 为 将 信息 传递 (pass ) 给 函数 。 例 如 ， 看 一 下 
这 个 函数 定义 : 


function playBall(batterup) 
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变量 batterup 是 函数 的 参数 。 当 调用 函数 时 ， 可 以 将 值 传递 给 函数 。 当 处 于 函数 内 部 时 ， 此 数 
据 就 保存 在 batterup 变量 中 。 可 以 向 函数 传递 需要 使 用 的 任何 数据 , 包括 文本 字符 串 、 数 字 ， 甚 至 
其 他 JavaScript 对 象 。 例 如 ， 可 以 通过 batterup 变量 传递 文本 字符 串 形式 的 玩家 名 称 ( "Mantle" )， 
或 者 他 在 玩家 中 的 编号 (7 ) (但 是 将 这 两 种 形式 混合 使 用 是 非常 糟糕 的 想法 ， 除 非 你 确实 知道 自己 
在 做 什么 )。 与 所 有 变量 一 样 ， 应 该 给 用 作 函 数 参数 的 变量 起 合适 的 名 字 ， 这 个 名 称 应 该 能 够 说 明 
变量 的 用 途 。 

在 一 个 函数 中 可 以 有 多 个 参数 ， 只 需 将 它们 放 在 圆 括号 中 并 用 逗号 分 隔 ; 

function currentScore(hometeam, visitors) 

下 面 这 3 个 代码 片段 是 等 效 的 ; 


currentScore(6,4); 

























































































var homeScore - 6; 
var visitingScore - 4; 
currentScore(homeScore, visitingScore) ; 


currentScore(6, 3+1) ; 

对 于 这 3 个 示例 ,在 currentScore()'P, hometeam 的 值 都 是 6，visitors 的 值 都 是 4( 这 对 于 主 
队 来 说 是 好 消息 )。 

在 这 个 示例 中 , 我 们 将 对 脚本 3-3 做 一 些 调整 , 从 initA11() 函 数 中 去 掉 一 些 计 算 , 将 它们 转移 到 
一 个 带 参数 的 函数 中 ， 这 样 代 码 的 作用 就 更 清晰 了 。 产 生 的 脚本 见 脚本 3-4。 


脚本 3-4 通过 将 值 传递 给 setSquare() 函数 ， 脚 本 更 容易 阅读 和 理解 了 


window.onload = initAll; 














function initAll() { 
for (var i=0; i«24; i++) ( 
setSquare(i); 


} 
function setSquare(thisSquare) { 
var currSquare = "square" + thisSquare; 


var newNum = Math.floor(Math.random() * 75) + 1; 


document .getElementById(currSquare). innerHTML = newNum; 





p^ 将 值 传递 给 函数 








1. setSquare(i); 

这 行 代码 在 initAll()s AZ s RIH i 的 值 传递 给 setsquare() 函 数 。 

2. function setSquare(thisSquare) { 

这 定义 了 setSsquare() 函 数 , 传递 给 它 的 是 我 们 要 更 新 的 当前 格子 的 编号 。 我 们 传递 的 是 循环 变量 i。 
当 函 数 接收 这 一 数据 时 ， 数 据 保存 在 参数 thisSquare 中 。 可 以 这 样 理解 : 将 i 传递 给 函数 ， 用 这 一 数 
据 填 充 参数 thissquare， 但 是 函数 实际 上 看 不 到 i。 在 函数 内 部 ， 它 只 知道 thisSsquare。 
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ig: currSquare。 这 是 


E: 











3. var currSquare = 
为 了 使 脚本 后 面 的 getElementById() 调 用 更 清晰 ， 我 们 创建 并 设置 一 个 新 变 


要 处 理 的 当前 格子 的 id。 它 将 文本 字符 串 "square" 和 thisSquare 变量 拼接 起 来 。 
4. document.getElementById(currSquare).innerHTML = newNum; 


一 行 找到 具有 currSquare 指定 的 名 字 的 元 素 ， 并 让 它 显 7 


"square" +thisSquare; 














3.3 ”探测 对 象 
在 编写 脚本 时 ， 你 可 能 希望 检查 浏览 器 是 否 有 能 力 理解 你 要 使 用 的 对 象 。 进 行 这 种 检查 的 方法 称 


为 对 象 探 测 ( object detection )。 
方法 是 对 要 寻找 的 对 象 进行 条 件 测试 ， 如 下 所 示 : 

if (document.getElementById) { 

如 果 对 象 存在 ，if 语句 就 为 true， 脚 本 继续 执行 。 但 是 ， 如 果 浏 览 器 不 理解 这 个 对 象 ， 测 试 就 返 
回 false， 并 执行 条 件 语句 的 else 部 分 。 脚 本 3-5 给 出 所 需 的 JavaScript， 图 3-3 显示 在 老式 浏览 需 中 的 
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脚本 3-5 对象 探测 是 脚本 开发 人 员 的 重要 工具 
window.onload = initAll; 


function initAll() { 
if (document.getElementById) { 


for (var i=0; i«24; i++) ( 
setSquare(i); 


} 


else { 
alert("Sorry, your browser doesn't support this script"); 


} 


function setSquare(thisSquare) { 
var currSquare = "Square" + thisSquare; 
var newNum = Math.floor (Math.random() * 75) + 1; 
document.getElementById(currSquare).innerHTML = newNum; 





—— — homepage.mac.com - [JavaScript Application] 





A Sorry, your browser doesn't support this script 





[UJ 








EE 绝 这 种 老式 浏览 器 (Mac 的 Netscape 4 ) 并 显示 这 个 错误 消 ) 
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> 探测 对 象 

1. if (document.getElementById) { 

这 是 条 件 语句 的 开头 。 如 果 圆 括号 中 的 对 象 存在 ， 测 试 就 会 返回 true， 并 运行 initA11() 函 数 中 
的 正常 代码 。 

2.else { 


alert("Sorry, your browser doesn't support this script"); 






































如 果 步 又 1 中 的 测试 返回 false， 这 一 行 就 会 弹出 警告 枉 ， 脚 本 结束 运行 。 

v 提示 

O 在 生产 环境 中 , 更 好 的 方法 是 让 用 户 有 别 的 选择 , 或 者 至 少 提供 不 需要 这 一 功能 的 其 他 页 面 版 

本 。 但 是 ， 这 里 没什么 可 做 的 。 

OQ 一 定 要 知道 ， 不 必 总 是 检查 document.getElementById. es a 

对 象 。 如 果 脚 本 使 用 的 对 象 并 没有 各 得 到 浏览 器 100% 的 支持 ， 那 么 总 是 应 该 首先 检查 浏览 

否 能 够 处 理 它 ， 而 不 要 想当然 地 认为 浏览 器 可 以 处 理 它 。 为 了 节省 篇 幅 ， 本 书 中 的 脚本 没有 迁 
行 对 象 探测 ， 但 是 在 真实 环境 中 ， 这 是 很 重要 的 。 



























































已 过 时 的 探测 方式 

a 览 器 支持 哪些 对 象 ， 另 一 ds 法 是 进行 浏览 器 探测 (browser detection ), ix 

尝试 查 明 用 户 使 用 哪 种 浏览 器 查看 页 面 。 它 向 浏览 器 请 求 用 户 代理 字符 囊 ,， 这 个 字符 串 会 报告 
a 然后 就 可 以 让 脚本 以 一 种 方式 为 菜 些 浏 览 器 服务 , 而 对 其 他 浏览 器 采用 另 一 种 
方式 。 这 是 一 种 已 经 过 时 的 脚本 编程 方法 ， 因 为 它 的 效果 不 太 好 。 

浏览 器 探测 要 求 你 了 解 哪些 浏览 器 支持 你 编写 的 脚本 ， 哪 些 不 支持 。 但 是 ， 对 于 你 从 来 没有 使 
用 过 的 浏览 器 ， 或 者 在 脚本 编写 好 之 后 发 布 的 新 浏览 器 ， 应 该 怎么 办 呢 ? 

FRIE, 许多 浏览 器 故意 报告 错误 的 信息 ,从 而 试图 通过 浏览 器 探测 的 检查 。 例如 ,Apple 
的 Safari 浏览 器 声称 它 是 Mozilla 浏览 器 ,尽管 它 实 际 上 不 是 ,而 且 一 些 浏览 器 ( 比如 Safari、Chrome 
fe Opera ) 允许 用 户 设置 用 户 代 理 字符 &. 

而 且 ， 无 法 不 断 地 修改 自己 的 脚本 来 适应 所 有 的 浏览 器 版 本 。 这 是 一 场 必 输 无 疑 的 比赛 。 

试图 探测 浏览 器 支持 的 JavaScript 版 本 也 有 同样 的 问题 。 我 们 强烈 建议 不 要 采用 这 些 探测 方法 ， 


而 使 用 对 象 探 测 。 





pre 


3.4 ”处 理 数 组 

在 这 个 示例 中 ,我 们 要 介绍 男 一 个 有 用 的 JavaScript 对 象 : 数组 (array), 数组 是 一 种 可 以 存储 一 
组 信息 的 变量 。 与 变量 一 样 ， 数 组 可 以 包含 任何 类 型 的 数据 : 文本 字符 串 、 数 字 、 其 他 JavaScript 对 
象 。 在 声明 数组 时 ， 将 数组 的 元 素 放 在 圆 括号 中 ， 以 逗号 分 隔 ， 如 下 所 示 : 


var newCars = new Array("Toyota", "Honda", "Nissan"); 
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在 此 之 后 ，newCars 数组 就 包含 这 3 个 表示 汽车 制造 商 的 文本 字符 串 。 要 访问 数组 的 内 容 ， 应 该 
使 用 变量 名 和 数组 成 员 的 索引 号 C index number ), 索引 号 要 放 在 方 括号 中 。 newCars[2] 返 回 "Nissan"， 
因为 与 JavaScript 中 的 大 多 数 编号 一 样 ， 数 组 编号 是 从 零 开始 的 。 注 意 在 上 面 的 例子 中 ， 我 们 使 用 文 
本 字符 串 作 为 数组 元 素 。 每 个 文本 字符 串 用 直 引 号 括 起 来 , 用 来 分 隔 数 组 元 素 的 逗号 放 在 直 引 号 外 面 。 

在 这 个 示例 中 ( 见 脚本 3-6 )， 我 们 开始 确保 Bingo 卡片 是 有 效 的。 在 真实 的 Bingo 卡片 上 ， 每 列 
具有 不 同 的 数字 范围 : B 列 是 1~ 15, I 列 是 16~30, N 列 是 31~45, G 列 是 46~60, O 列 是 61~75。 
如 果 再 看 看 图 3-1， 就 会 发 现 它 不 是 有 效 的 卡片 ， 因 为 生成 它 的 脚本 仅仅 是 将 1 ~ 75 的 随机 数 简单 地 
放 在 每 个 格子 里 。 这 个 示例 只 用 3 行 新 代码 纠正 这 个 问题 。 完 成 之 后 ， 卡 片 会 像 图 3-4 这 样 。 它 仍然 
不 是 有 效 的 Bingo 卡片 (注意 ， 一 些 列 中 有 重复 的 数字 )， 但 是 已 经 比较 接近 了 。 


脚本 3-6 ”这 个 脚本 限制 了 每 一 列 中 值 的 范围 


window.onload = initAll; 





















































function initAll() { 
if (document.getElementById) { 
for (var i=0; i«24; i++) ( 
setSquare(i); 


} 
else { 
alert("Sorry, your browser doesn't support this script"); 


} 


function setSquare(thisSquare) { 
var currSquare = "Square" + thisSquare; 
var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4); 
var colBasis = colPlace [thisSquare] * 15; 
var newNum = colBasis + Math.floor (Math.random() * 15) + 1; 


document.getElementById(currSquare) innerHTML = newNum; 











IÊ Make Your Own Bingo Card - Windows Internet ... | — |= 区 到 
GO le» javas.. + | 4] x | [IG] Googie 
Favorites zp | @@ Make Your Own Bingo ... | Emu 
Create A Bingo Card 
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7 21 35 46 73 





10 25 39 59 70 


2 18 | Free} 59 68 


2 26 37 52 61 











13 23 36 47 70 























Click here to create a new card 














@ Internet | Protected Mode: On 100% + 


图 3-4 这 个 Bingo 卡片 已 经 有 所 改进 ， 但 是 仍然 不 完全 有 效 ， 
因为 一 些 列 中 有 重复 的 数字 
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> 使 用 数组 | 

1. var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4); 

我 们 希望 限制 哪些 随机 数 可 以 放 在 哪 一 列 中 。 最 简单 的 方法 是 给 每 一 列 分 配 一 个 编号 (B: 0, I: 
1, N: 2, G: 3, O: 4), 然后 用 以 下 表达 式 计算 可 以 放 进 每 一 列 中 的 数字 : ( 列 号 x15)+ (1~15 
的 随机 数 )。 

要 用 colPlace 数组 记录 每 个 格子 所 属 的 列 。 它 包含 0 ~ 4 的 数字 并 重复 五 次 ( 要 减 去 空 的 格子 。 
请 注意 ,数字 2 仅 用 了 4 次 )。 

2.var colBasis = colPlace[thisSquare] * 15; 

var newNum = colBasis + Math.floor(Math.random() * 15) + 1; 

我 们 首先 计算 列 号 : 存储 在 colPlace[thissquare] 中 的 数字 乘 以 15. newNum 变量 仍然 生成 随机 数 ， 
但 不 是 1 ~ 75 的 数字 ， 而 是 计算 一 个 1 ~ 15 的 随机 数 ， 然 后 加 上 列 号 。 因 此 ， 如 果 随 机 数 是 7， 那么 
它 在 B 列 中 是 7, 在 I 列 中 是 22, TEN 列 中 是 37, 在 G 列 中 是 52, 在 O 列 中 是 67。 


3.5 ”处 理 有 返回 值 的 函数 


到 目前 为 止 ,你 看 到 的 所 有 函数 都 只 是 做 某 些 事情 ， 然 后 返回 。 但 有 时 候 , 希望 函数 返回 某 种 结 
果 。 脚 本 3-7 将 前 面 示例 中 的 一 些 计算 转移 到 一 个 函数 中 ， 这 个 函数 为 Bingo 卡片 上 的 单元 格 返 回 随 
机 数 ， 然 后 男 一 个 函数 使 用 它 返回 的 结果 ， 这 使 整个 脚本 更 容易 理解 了 
脚本 3-7 函数 可 以 返回 一 个 值 ， 然 后 脚本 可 以 使 用 这 个 值 


window.onload = initAll; 


































































































function initAll() { 
if (document.getElementById) { 
for (var i=0; i«24; i++) { 
setSquare(i); 


else { 
alert("Sorry, your browser doesn't support this script"); 


} 


function setSquare(thisSquare) { 
var currSquare = "Square" + thisSquare; 
var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4); 
var colBasis = colPlace [thisSquare] * 15; 
var newNum = colBasis + getNewNum() + 1; 


document .getElementById(currSquare).innerHTML = newNum; 


} 


function getNewNum() { 
return Math. floor(Math.random() * 15); 


> 从 函数 返回 一 个 值 








1. var newNum = colBasis + getNewNum() + 1; 
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这 一 行将 newNum 变量 设置 为 需要 的 数字 ,但 是 已 经 将 随机 数 的 生成 转移 到 了 函数 getNewNum() 中 。 
通过 将 这 一 计算 转移 到 函数 中 ， 脚 本 中 的 运算 过 程 更 容易 理解 了 。 


2. function getNewNum() { 
return Math.floor(Math.random()* 15); 








这 行 代码 计算 一 个 0~ 14 的 随机 数 并 返回 它 。 在 可 以 使 用 变量 或 数字 的 任何 地 方 ， 都 可 以 使 用 这 
个 函数 。 

V 提示 

口 可 以 返回 任何 值 。 字 符 串 、 布 尔 值 和 数字 都 可 以 。 


3.6 ”更新 数组 


如 图 3-4 所 示 ， 这 个 Bingo 卡片 脚本 还 无 法 确保 给 定 的 列 中 不 出 现 重 复 的 数字 。 这 个 示例 要 纠正 
这 个 问题 ， 同 时 说 明 数 组 不 必 进 和 初始 化 并 读 取 ， 而 是 可 以 在 运行 时 声明 和 设置 它们 。 这 会 提供 很 大 
的 灵活 性 ， 因 为 可 以 在 脚本 运行 时 通过 计算 或 函数 修改 数组 中 的 值 。 脚 本 3-8 演示 了 具体 的 做 法 ， 其 
中 只 有 几 行 新 代码 。 


脚本 3-8 将 数组 的 内 容 改 为 存储 当前 值 是 一 种 非常 强大 的 技术 


window.onload = initAll; 
var usedNums = new Array(76); 















































function initAll() { 
if (document.getElementById) { 
for (var i=0; i«24; i++) ( 
setSquare(i); 


} 
else { 
alert("Sorry, your browser doesn't support this script"); 


} 


function setSquare(thisSquare) { 
var currSquare = "Square" + thisSquare; 
var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4); 
var colBasis = colPlace [thisSquare] * 15; 
var newNum = colBasis + getNewNum() + 1; 


if (!usedNums[newNum]) { 


usedNums[newNum] = true; 
document. getElementById(currSquare).innerHTML = newNum; 


} 


function getNewNum() { 
return Math.floor(Math.random() * 15); 


} 
> 在 运行 时 更 新 数组 


1. var usedNums = new Array(76); 
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这 是 一 种 声明 数组 的 新 方法 。 我 们 将 usedNums 变量 声明 为 一 个 包含 76 个 对 象 的 新 数组 。 正 如 前 
面 提 到 的 ， 这 些 对 象 可 以 是 任何 东西 。 在 这 个 示例 中 ， 它 们 是 布尔 值 ， 即 true/false 值 。 


2. if (!usedNums[newNum]) { 
usedNums[newNum] = true; 



































如 果 usedNums 数组 中 的 newNum 位 置 上 是 false (3 日 DO Make Your Own Bingo Card 
达 式 前 面 的 ! 表 示 “ 非 ” )， 那 么 就 将 它 设置 为 true, 并 将 B 
newNum 写 到 卡片 上 。 如 果 newNum 位 置 上 是 true， 就 什么 Create A Bingo Card 
也 不 做 。 这样 就 不 会 有 重复 的 数字 , 但 是 卡片 上 可 能 会 留 B|I|NI!|GI!|oO 
下 空格 ( 见 图 3-5 )。 在 下 一 节 ， 中 我 们 要 解决 这 个 缺陷 。 3 | 29 | 34 | 55 | 74 
v 提示 


5 27 41 54 65 





a 为 什么 这 个 数组 要 包含 76 个 元 素 ? 因为 我 们 希望 
使 用 1~75 的 值 。 如 果 将 它 声明 为 包含 75 个 元 素 ， 
那么 编号 是 从 0 ~ 74。76 个 元 素 允 许 我 们 使 用 1 ~ 
75 的 值 ， 只 需 忽 略 第 0 号 元 素 即 可 。 


13 Free) 58 | 62 








20 45 53 






































aO 如 果 不 对 布尔 值 进行 初始 化 ,那么 它们 会 自动 设 Click here to create a new card 
置 为 false。 Z 
3-5 ”我们 消除 了 重复 的 数字 , 但 是 现在 留 
3.7 ”使 用 do/while 循环 下 了 一 些 空格 子 ， 还 需要 重新 来 过 











有 时 候 ， 需 要 让 代码 循环 许多 次 ， 但 是 无 法 确定 需要 循环 多 少 次 。 在 这 种 情况 下 ， 就 要 使 用 
do/while 循环 : 只 要 某 个 条 件 为 true， 就 执行 某 种 操作 。 脚 本 3-9 像 前 面 一 样 写 每 行 的 数字 ,但 是 这 
一 次 在 将 数字 放 进 单元 格 之 前 ， 它 首先 检查 是 否 已 经 使 用 了 这 个 数字 。 如 果 这 个 数字 已 经 用 过 了 ， 脚 
本 就 生成 新 的 随机 数 并 重复 这 个 过 程 , 直到 找到 不 重复 的 数字 为 止 。 图 3-6 显示 了 最 终 的 有 效 的 Bingo 
卡片 。 
































eoo Make Your Own Bingo Card 
@ http: / /www.javascriptworld.com/js7e/d$ Q7 Google » 








Create A Bingo Card 


























Click here to create a new card 

















图 3-6 最终， 我们 得 到 了 有 效 的 Bingo 卡片 
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脚本 3-9 这 个 脚本 防止 给 定 的 列 中 出 现 重复 的 数字 


window.onload = initAll; 
var usedNums = new Array(76); 


function initAll() { 
if (document.getElementById) { 
for (var i=0; i«24; i++) ( 
setSquare(i); 





} 
else { 

alert("Sorry, your browser doesn't support this script"); 
} 


} 


function setSquare(thisSquare) { 
var currSquare = "square" + thisSquare; 
var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4); 
var colBasis = colPlace [thisSquare] * 15; 
var newNum; 


do { 
newNum = colBasis + getNewNum() + 1; 


while (usedNums[newNum]) ; 


usedNums[newNum] = true; 
document.getElementById(currSquare). innerHTML - newNum; 


} 


function getNewNum() { 
return Math.floor(Math.random() * 15); 


} 
> 使 用 do/while 循环 


1. var newNum; 

在 前 面 的 示例 中 , 我 们 在 创建 newNum 变量 时 对 它 进行 初始 化 。 因 为 我 们 将 多 次 设置 它 , 所 以 在 进 
入 循环 之 前 创建 它 ， 这 样 愉 需 创建 一 次 。 

2.do { 

这 一 行 开始 do 代码 块 。 关 于 这 种 循环 必须 记 住 的 一 点 是 ，do 块 中 的 代码 至 少 会 执行 一 次 。 

3. newNum = colBasis + getNewNum() + 1; 

与 前 面 的 示例 一 样 ， 循 环 中 的 这 行 代码 将 newNum 变量 设置 为 我 们 需要 的 数字 。 

4.) 

右 花 括号 标 出 do 块 的 结 

5. while (usedNums [newNum]) ; 

while 检查 会 使 do 代码 块 反复 执行 , 直到 检查 结果 为 false 为 止 。 在 这 个 示例 中 , 我 们 检查 usedNums[] 
数组 中 newNum 位 置 上 的 值 ， 从 而 检查 newNum 是 否 已 经 使 用 过 了 。 如 果 这 个 数字 已 经 用 过 了 ， 控 制 就 
被 传递 回 do 块 的 开头 ， 整 个 过 程 再 次 重复 。 最 终 ， 我 们 会 找到 一 个 没有 使 用 过 的 数字 。 在 此 之 后 ， 
就 会 离开 循环 ， 将 usedNums 设置 为 true， 并 将 newNum 写 到 卡片 上 。 
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v 提示 








O do/while 循环 的 一 种 常见 用 途 是 ， 从 用 户 输入 的 数据 中 去 掉 空格 或 无 效 的 字符 。 但 是 要 记 住 ， 
无 论 while 检查 计算 出 true 还 是 false, do 代码 块 至 少 会 执行 一 次 。 


3.8 以 多 种 方式 调用 脚本 


到 目前 为 止 ， 你 看 到 的 脚本 都 是 在 加 载 页 面 时 自动 运行 的 。 但 是 在 现实 环境 中 ,常常 希望 让 用 户 
对 脚本 有 更 多 的 控制 能 力 ， 甚 至 允许 他 们 控制 脚本 在 何 时 运行 。 



































在 这 个 示例 中 ( 见 脚本 3-10 )， 脚 本 

















仍然 在 加 载 页 面 时 和 运行。 但 是 ， 还 允许 用 户 单 击 页 面 底部 的 链接 来 重新 运行 脚本 ， 这 样 就 可 以 完全 在 


Di ae PAE RM Bingo 卡片 ， 而 不 需要 从 服务 需 重 新 加 载 页 面 。 这 向 用 


产 4 














EAR AS tr EK 


脚本 3-10 ”让 用 户 有 能 力 自己 运行 脚本 


window.onload = initAll; 
var usedNums = new Array(76); 


function initAll() { 
if (document.getElementById) { 
document.getElementById("reload").onclick = anotherCard; 
newCard(); 


else { 
alert("Sorry, your browser doesn't support this script"); 


} 


function newCard() { 
for (var i=0; i<24; i++) { 
setSquare(i); 


} 


function setSquare(thisSquare) { 
var currSquare = "Square" + thisSquare; 




















户 提 供 了 快速 的 响应 ， 而 且 不 会 


var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4); 


var colBasis = colPlace thisSquare] * 15; 
var newNum; 


do { 
newNum = colBasis + getNewNum() + 1; 


while (usedNums[newNum]) ; 


usedNums[newNum] = true; 
document.getElementById(currSquare).innerHTML = newNum; 


) 


function getNewNum() ( 
return Math.floor(Math.random() * 15); 
} 


function anotherCard() { 
for (var i=1; i<usedNums.length; i++) { 
usedNums[i] = false; 
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} 


newCard() ; 
return false; 


} 
> 以 多 种 方式 调用 脚本 


1. document.getElementById("reload").onclick = anotherCard; 








newCard(); 
我 们 已 经 看 到 过 initAll() we, (AIM initAl1() 函 数 有 一 些 变化 : 在 HTML 页 面 ( 它 的 
id 是 reload， 见 脚本 3-1) 上 设置 链接 ， 证 它 在 被 单 击 时 调用 anotherCard(). initAl1() 函数 中 原来 
的 所 有 计算 现在 被 转移 到 新 的 newCard() 函 数 中 , 这 里 只 需 调用 newCard() ek, newCard() 函 数 中 没有 
需要 讨论 的 新 代码 。 
2. function anotherCard() { 


for (var i=1; i«usedNums.length; i++) { 
usedNums[i] = false; 








newCard(); 
return false; 


} 

这 是 anotherCard() 函 数 ， 当 用 户 单 击 链接 时 会 调用 这 个 函数 。 它 执行 3 个 操作 : 

O 将 usedNums[] 数 组 中 的 所 有 元 素 设 置 为 false (这样 就 可 以 重新 使 用 所 有 数字 ); 

口 调用 newCard() KZE (生成 男 一 个 卡片 ); 

O 返回 false 值 ， 使 浏览 器 不 尝试 加 载 链接 的 href 中 指定 的 页 面 ( 这 在 第 2 章 中 讨论 过 )。 

v 提示 

口 到 了 现在 ， 你 已 经 知道 了 如 何 使 用 JavaScript 重 新 加 载 页 面 的 一 部 分 ， 而 不 需要 向 服务 器 请 求 
整个 新 页 面 ， 而 这 正 是 许多 人 认为 的 Ajax 基 本 特色 。 自 第 13 章 起 ， 我 们 将 详细 讨论 Ajax。 


3.9 组 合 使 用 JavaScript 和 CSS 


对 于 目前 的 Bingo 示例 ， 你 可 能 会 觉得 奇怪 ，“ 他 们 都 说 JavaScript 可 以 提供 所 有 交互 功能 ,但 
是 为 什么 看 不 到 任何 用 户 交 互 呢 ? ”这 是 一 个 很 合理 的 问题 ， 现 在 就 讲解 如 何 让 用 户 能 够 操作 所 生成 
的 Bingo 卡片 。 为 此 ， 脚 本 3-11 通过 添加 一 些 JavaScript 来 利用 CSS 的 功能 。 


脚本 3-11 通过 JavaScript 添加 一 个 类 ， 使 代码 可 以 利用 CSS 的 功能 


window.onload = initAll; 
var usedNums = new Array(76); 

























































































function initAll() { 
if (document.getElementById) { 
document.getElementById("reload").onclick = anotherCard; 
newCard(); 


} 
else { 
alert("Sorry, your browser doesn't support this script"); 





€ 33k 第 一 个 Web 应 用 程序 





~ 


function newCard() { 
for (var i=0; i<24; i++) { 
setSquare(i); 


} 


function setSquare(thisSquare) { 
var currSquare = "square" + thisSquare; 


var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4); 


var colBasis = colPlace [thisSquare] * 15; 
var newNum; 


do { 
newNum = colBasis + getNewNum() + 1; 


while (usedNums[newNum]) ; 


usedNums[newNum] = true; 


document .getElementById(currSquare).innerHTML = newNum; 


document. getElementById(currSquare).className = 


nn, 
3 


document.getElementById(currSquare).onmousedown = toggleColor; 


) 


function getNewNum() ( 
return Math.floor(Math.random() * 15); 
} 


function anotherCard() { 
for (var i=1; i<usedNums.length; i++) { 
usedNums[i] = false; 


} 
newCard(); 
return false; 
} 
function toggleColor(evt) { 
if (evt) { 
var thisSquare = evt.target; 
else { 
var thisSquare = window.event.srcElement; 
if (thisSquare.className == "") { 
thisSquare.className = "pickedBG"; 
else { 
thisSquare.className = ""; 
} 
} 


=> 使 用 JavaScript 应 用 样式 








1. document .getElementById(currSquare).className = ""; 
document.getElementById(currSquare).onmousedown = toggleColor; 


因为 Bingo 卡片 是 可 以 重复 使 用 的 , Be 





£z 











a 





f& Bingo 卡片 最 初 是 空 的 


: 对 于 在 setSquare() Pix 
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置 的 每 个 格子 ， 把 class 属性 设置 为 ""( 空 字符 串 ) ， 并 让 onmousedown 事件 处 理 程序 调用 新 的 
toggleColor() PKI 

2. function toggleColor(evt) { 

如 果 你 是 CSS 专家 ， 那 么 可 能 会 注意 到 ， 脚 本 3-2 中 声明 了 我 们 从 来 没有 使 用 过 的 样式 。 现 在 ， 
在 新 的 toggleColor() 函数 中 就 要 使 用 这 些 样式 了 。 用 户 现在 可 以 单 击 卡 片上 的 任何 格子 ， 这 个 格子 
的 背景 颜色 就 会 改变 ， 表 示 这 个 号 码 已 经 被 叫 过 了 。 

3. if (evt) { 

var thisSquare = evt.target; 


} 
else { 
var thisSquare = window.event.srcElement; 


























首先 , 需要 查 明 单 击 的 是 哪个 格子 。 但 糟糕 的 是 ,， 这 有 两 种 方式 : DIE 方式 和 其 他 所 有 浏览 器 处 理 
事件 的 方式 。 

如 果 一 个 称 为 evt 的 值 被 传递 给 这 个 函数 ， 就 说 明 用 户 的 浏览 器 不 是 理 ， 可 以 看 到 evt 的 目标 。 
如 果 浏 览 器 是 下， 就 需要 查看 window 对 象 的 event 属性 的 srcElement 属性 。 无 论 采 用 哪 种 方式 ， 都 
会 得 到 thisSquare 对 象 ， 然 后 可 以 检查 和 修改 这 个 对 象 。 














4. if (thisSquare.className == "") { 
thisSquare.className = "pickedBG"; 
else { 
thisSquare.className = ""; 





6&0 O Make Your Own Bingo Card 

在 这 里 ， 检 查 被 单 击 的 格子 的 class 属性 是 否 JO Mate Your own bingo cr — REN 
有 一个 值 。 如 果 没 有 ,就 给 它 设 置 pickedBG 值 ， OD aN wr NLA 
为 格子 的 背景 表示 这 个 数字 已 经 被 选择 了 。 

现在 仅仅 修改 class 属性 并 不 会 改变 页 面 上 的 
任何 东西 ， 但 是 请 回顾 脚本 3-2 中 的 CSS. class 
为 pickedBG 的 任何 标签 的 背景 颜色 与 free 格子 相 
同 。 在 这 里 修改 class 会 对 这 个 格子 自动 应 用 这 个 
样式 ， 使 它 显 示 粉 红色 背景 ( 见 图 3-7) 。 

当然 ， 用 户 可 能 选 错 格子 ， 需 要 有 办 法 纠正 错 
误 。 再 次 单 击 格子 ， 这 一 次 className 有 一 个 值 ， 
所 以 把 它 恢 复 为 空 字符 串 。 

















CreateA Bingo Card 












































V 提示 

SA TI class Mis Ts Click here to create a new card 
改 它 的 style 属性 , 这 样 就 不 必 为 CSS 文件 
操心 了 。 但 是 这 种 方法 不 好 。 我 们 希望 利用 x. 











CSS 文件 ， 因 为 它 只 修改 页 面 的 可 视 外 观 ， 
而 不 修改 页 面 的 行为 。 








图 3-7 在 叫 号 码 时 ， 用 户 可 以 给 卡片 上 的 
格子 加 标记 
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关于 位 的 说 明 
在 使 用 布尔 值 时 ， 处 理 的 值 要 么 是 true， 要 么 是 false。 也 可 以 认为 这 些 变 量 包含 0 或 1， 因 
这 是 计算 机 在 内 部 处 理 任何 信息 的 方式 (把 true 表示 为 1， 把 false 表示 为 0) 。 
这 些 值 (0 和 1) 称 为 位 o 这些 位 组 成 计算 机 存储 的 信息 。 可 以 把 每 个 位 看 做 一 个 电灯 
开关 ， 其 状态 要 么 是 开 ， 要 人 么 
因为 计算 机 中 的 所 有 信 m 系列 位 ， 所 以 需要 能 够 操作 这 些 位 。 尤 其 是 需要 能 够 比较 
它们 。 下 面 是 需要 的 一 些 内 部 操作 。 
O 与 (8&) : 在 对 两 个 位 做 “与 ”计算 时 ， 如 果 它 们 都 是 true ( 即 都 是 1 ) ， 结 果 就 是 true; 
和 否则， 结果 是 false. 
口 或 (|) : 在 对 两 个 位 做 “或 ”计算 时 ， 如 果 其 中 之 一 是 true ( 即 其 中 之 一 是 1 ) ， 结 果 就 
是 true; 如 果 它 们 都 是 false， 结 果 就 是 false。 
对 大 于 1 的 数字 使 用 “与 ”和 “或 ”操作 符 ， 称 为 位 算术 (bitwise arithmetic ) 。 计 算 机 在 内 部 
把 每 个 数字 转换 为 二 进 制 值 ， 然 后 比较 各 个 位 。 因 为 这 个 过 程 在 内 部 进行 ， 所 以 不 需要 你 亲自 执行 
转换 。 


3.10 ”检查 状态 

让 用 户 能 够 给 格子 加 标记 之 后 ， 还 可 以 检查 格子 是 否 构成 了 获胜 模式 。 在 这 个 示例 中 , 用户 选 择 
那些 已 经 被 叫 过 的 号 码 ， 脚 本 3-12 会 让 用 户 知道 他 们 什么 时 候 获胜 了 。 
脚本 3-12 这 个 脚本 使 用 复杂 的 数学 计算 判断 获胜 组 合 


window.onload = initAll; 
var usedNums = new Array(76); 


为 过 























function initAll() { 
if (document.getElementById) { 
document.getElementById("reload").onclick = anotherCard; 
newCard(); 


else { 
alert("Sorry, your browser doesn't support this script"); 


} 


function newCard() { 
for (var i=0; i«24; i++) { 
setSquare(i); 
} 
} 


function setSquare(thisSquare) { 
var currSquare = "Square" + thisSquare; 
var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4); 
var colBasis = colPlace [thisSquare] * 15; 
var newNum; 


do { 
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newNum = colBasis + getNewNum() + 1; 
while (usedNums[newNum]) ; 


usedNums[newNum] = true; 
document.getElementById(currSquare).innerHTML = newNum; 
document.getElementById(currSquare).className - ""; 
document.getElementById(currSquare).onmousedown - toggleColor; 


} 


function getNewNum() { 
return Math.floor(Math.random() * 15); 
} 


function anotherCard() { 
for (var i=1; i<usedNums.length; i++) { 
usedNums[i] = false;1 


} 
newCard(); 
return false; 
} 
function toggleColor(evt) { 
if (evt) { 
var thisSquare = evt.target; 
} 
else { 
var thisSquare = window.event.srcElement; 
if (thisSquare.className == "") { 
thisSquare.className = "pickedBG"; 
else { 
thisSquare.className = ""; 
} 
checkWin(); 
} 


function checkWin() { 
var winningOption = -1; 
var setSquares = 0; 
var winners = new Array(31,992,15360, 507904, 541729, 557328, 1083458, 2162820, 4329736, 8519745 , 8659472, 16252928) ; 


for (var i-0; i<24; i++) { 
var currSquare = "square" + i; 
if (document.getElementById (currSquare).className != "") { 
document.getElementById (currSquare).className = "pickedBG"; 
setSquares = setSquares | Math.pow(2,i); 
} 
} 
for (var i=0; i«winners.length; i++) { 
if ((winners[i] & setSquares) == winners[i]) { 
winningOption = i; 


} 


if (winningOption > -1) { 
for (var i-0; i<24; i++) { 
if (winners[winningOption] & Math.pow(2,i)) { 
currSquare = "square" + i; 
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document.getElementById (currSquare).className = "winningBG"; 


} 

这 个 示例 要 使 用 一 些 比 较 复杂 的 数学 计算 。 如 果 你 以 前 没有 接触 过 二 进 制 运算 ， 可 以 先 阅 读 前 面 
的 补充 内 容 “关于 位 的 说 明 ”。 如 果 和 希望 深入 了 解 , 可 以 阅读 后 面 的 补充 内 容 “ 按 位 运算 详解 ”( 如 
果 认 为 不 需要 了 解 这 些 细节 ， 也 可 以 跳 过 相关 内 容 ) 。 


1. checkWin(); 
每 当 用 户 给 格子 加 标记 时 ， 获 胜 状 态 都 可 能 会 有 变化 ， 所 以 在 toggleColor() 的 末尾 要 调用 
checkWin(). 
2. var winningOption = -1; 
var setSquares - 0; 


var winners - new Array(31, 992, 15360, 507904, 541729, 557328, 1083458, 2162820, 4329736, 
8519745, 8659472, 16252928); 


在 checkNin() 的 开头 创建 下 面 这 些 新 变量 。 
O winningoption， 存 储 用 户 可 能 遇 到 的 获胜 选项 (如 果 有 的 话 ) 。 
口 setSquares ， 存 储 已 经 单 击 的 格子 。 
口 winners， 是 一 个 数字 数组 ， 其 中 的 每 个 数字 是 有 效 获 胜 组 合 的 编码 值 。 
3. for (var i-0; i<24; i++) { 

var currSquare = "square" + i; 

if (document.getElementById (currSquare).className != "") { 

对 于 卡片 上 的 每 个 格子 ， 需 要 检查 它 的 号 码 是 否 已 经 被 叫 过 。 我 们 将 使 用 格子 的 class 属性 作为 

标志 一 一 如 果 它 是 空 的 ， 就 是 没有 被 单 击 过 ; 如 果 有 class 属性 值 ， 就 执行 下 面 的 代码 。 


4. document.getElementById(currSquare).className = "pickedBG"; 
setSquares = setSquares | Math.pow(2,i); 


第 一 行 很 简单 ， 实 际 上 它 应 该 是 多 余 的 一 一 class 属性 已 经 设置 为 了 pickedBG。 但 是 ， 也 可 能 有 
例外 ， 比 如 当 用 户 单 击 了 他 们 原本 不 打算 单 击 的 格子 时 ， 碰 巧 获胜 了 ( 这 会 把 class 属性 重新 设置 为 
winningBG 而 不 是 pickedBG ) ,然后 用 户 再 次 单 击 这 个 格子 恢复 它 的 状态 。 如 果 用 户 实际 上 是 获胜 者 ， 
后 面 会 重新 设置 class 属性 。 

第 二 行使 用 按 位 算术 ， 根 据 卡 片 的 每 个 可 能 状态 把 setSquares 设置 为 一 个 数字 。 单 紧 杠 CIO 对 
两 个 值 执行 位 “或 ”计算 : setSquares 本 身 和 数字 25. 2° 是 Math.pow(2,i) 的 结果 ， 2°42 1, 2! 是 2， 
22 是 4， 依 次 类 推 。 对 这 两 个 数字 执行 按 位 “或 ”操作 会 产生 一 个 表示 用 户 所 处 状态 的 变量 ( 共有 超 
过 1600 万 个 可 能 的 状态 ) 。 


5. for (var i=0; i«winners.length; i++) { 
if ((winners[i] & setSquares) == winners[i]) { 
winningOption = i; 






































































































































































































































} 
这 是 第 二 个 比较 复杂 的 部 分 。 现 在 只 知道 卡片 当前 所 处 的 状态 , 我 们 希望 查 明 它 是 否 是 获胜 状态 。 
在 一 般 的 Bingo WRP, A 12 个 获胜 状态 ， 这 部 分 代码 把 卡片 的 当前 状态 与 每 个 获胜 状态 做 比较 。 
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我 们 在 每 个 获胜 状态 和 当前 状态 之 间 执 行 按 位 “与 ”计算 。 这 会 产生 一 个 新 状态 ， 在 这 个 状态 中 只 
那些 同时 出 现在 两 个 状态 中 的 格子 ， 才 具有 true 值 。 然 后 ， 个 新 状态 和 同一 个 获胜 状态 作 比 较 ， 
这 样 就 能 够 判断 卡片 是 否 完全 符合 这 个 获胜 模式 ， 即 结果 不 包含 获胜 状态 之 外 的 所 有 选择 C 因为 在 获 
胜 状态 中 找 不 到 它们 ) ， 而 且 只 要 在 获胜 模式 中 找到 的 所 有 格子 也 出 现在 当前 模式 中 ,用 户 就 是 获胜 
者 。 在 这 里 ， 把 winningOption 设置 为 i， 这 就 是 用 户 匹 配 的 模式 。 


6. if (winningOption > -1) ( 
for (var i=0; i«24; i++) { 
if (winners [winningOption] & Math.pow (2,i)) ( 
currSquare = "square" + i; 
document. getElementById (currSquare) .className = "winningBG"; 


上 
} 


最 后 ， 如 果 winningOption 是 大 于 -1 的 数字 ， 就 说 明 用 户 是 获胜 者 。 在 这 种 情况 下 ， 和 希望 循环 遍 















































历 每 个 格子 ， 检 查 在 获胜 模式 中 是 否 可 以 找到 

它 。 如 果 是 ， 就 把 class 属性 设置 为 winningBG, (& Make Your Own Bingo Card - Windows Internet ...[.—--||-:E)- [sss] 

我 们 的 工作 就 完成 了 ， 见 图 3-8。 Qe |e mim -| [x IGI re 
P 提示 sig Favorites sp | €@ Make Your Own Bingo ... Emu 
a - 只 需 设 置 获胜 格子 的 class 属性 ， Web 2.0 Bingo 


ESSE CSS 样式 匹配 ， 就 能 够 改变 
ww 但 是 ， 因 为 纸张 是 静态 的 ， 
所 以 看 不 出 实际 的 效果 : winningBG 规则 
把 背景 设置 为 一 个 动画 gif， 这 张 图 片 会 
在 红色 和 白色 之 间 缓 慢 地 变化 ,我 的 一 个 
朋友 称 它 为 “可 爱 的 讨 大 和 鬼 ”。 

O 有 许多 种 规则 不 同 的 Bingo 游戏 , 它们 的 
获胜 模式 各 不 相同 。 只 需 修 改 winners 数 
组 的 初始 化 代码 ， 脚 本 就 能 够 适应 任何 
Bingo 游戏 。 Click here to create a new card 

口 如 果 你 以 前 对 于 条 件 表 达 式 为 什么 使 用 
88 和 | | (分 别 表 示 “ 与 ”和 “或 ”) 觉得 
奇怪 , 现在 应 该 明白 原因 了 : 这 些 操 作 符 ” 图 3-8 看 起 来 找到 获胜 者 了 ( 颜色 是 闪烁 的 ， 
的 单字 符 版 本 让 JavaScript 执 行 二 进 制 算 但 是 在 印刷 的 书 中 看 不 出 来 ) 

术 而 不 是 十 进 制 算术 。 






































eo Internet | Protected Mode: On * 1009 v 














按 位 运算 详解 
(正如 前 面 提 到 的 ， 这 里 讲解 的 内 容 很 复杂 ， 在 开始 阅读 之 前 请 做 好 心理 准备 。 如 果 还 没有 做 
好 准备 ， 请 跳 过 这 部 分 。) 
既然 只 有 12 种 可 能 的 获胜 模式 ( 至 少 在 这 个 版 本 的 Bingo 游戏 中 是 这 样 ) ， 我 们 可 以 很 容易 
地 编写 代码 检查 每 个 获胜 模式 。 但 是 Bingo 游戏 有 许多 不 同 的 版 本 ,这 意味 着 如 果 希 望 玩 另 一 个 版 





ye 
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本 ， 就 必须 彻底 修改 检查 获胜 者 的 方式 。 
为 了 避免 这 个 问题 ,我 们 使 用 按 位 算术 (参见 “关于 位 的 说 明 ”) 来 存储 获胜 模式 。 这 意味 着 ， 
我 们 要 利用 计算 机 在 内 部 以 1 和 0 记录 所 有 信息 这 一 性 质 。 所 以 ,我 们 创建 一 个 列表 的 程序 形式 : 


0 v 1 
T 2 
2 4 
3 8 
4 16 
5 v 32 
6 64 
7 128 
8 256 
9 512 
10 v 1024 
11 2048 
12 4096 
13 8192 
14 v 16384 
15 32768 
16 65536 
17 131072 
18 262144 
19 v 524288 
20 1048576 
21 2097152 
22 4194304 
23 8388608 


如 果 比 较 一 下 对 钓 左边 列 中 的 数字 ,就 会 发 现 我 们 选择 了 卡片 最 上 面 的 一 行 : squared, squares. 
square10、square14 和 square19。 右 边 列 中 的 数字 是 以 左边 数字 作为 指数 的 2 880. 

要 想得到 获胜 模式 的 数字 形式 ， 只 需 找到 这 个 模式 包含 的 格子 ， 并 把 它们 右边 的 数字 加 起 来 。 
在 这 里 ， 就 是 1+32+1024+16384+524288=541729， 这 就 是 在 获胜 者 列表 中 包含 的 数字 。 

要 想 计 算 B 列 中 所 有 格子 的 数字 形式 ， 只 需 计 算 1+2+4+8+16， 结 果 是 31。 这 是 另 一 个 获胜 
者 。 对 于 每 个 获胜 模式 ， 都 这 样 做 。 

下 面 到 了 关键 之 处 。 如 果 把 上 面 列 表 的 次 序 颠 倒 过 来 ， 即 从 23 到 0， 然 后 把 对 钩 蔡 换 为 1， 空 
的 地 方 替换 为 0， 就 会 得 到 一 个 24 位 的 二 进 制 数 字 。 因 此 ， 第 一 个 获胜 模式 可 以 看 做 00001000010 
0010000100001， 第 二 个 获胜 模式 是 000000000000000000011111。 前 者 是 541729 的 二 进 制 形式 ， 后 
者 是 31 的 二 进 制 形式 。 

在 检查 卡片 上 的 每 个 格子 是 否 被 设置 时 , 把 结果 存储 在 setSquares 中 。 这 个 值 是 玩家 选择 的 所 
有 格子 的 总 和 。 同 样 ， 可 以 把 它 看 做 一 个 24 位 的 二 进 制 数 字 。 

对 所 有 这 些 值 执行 “或 ”计算 ， 得 到 setSquares。 在 对 两 个 0 执行 “或 ”计算 (使 用 单 坚 杠 | ) 
时 ， 结 果 是 0。 对 于 其 他 任何 组 合 ， 结 果 都 是 1 。 
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假设 最 终 的 setSquares 是 561624， 这 意味 着 玩家 选择 了 格子 4、8、12、15 和 19， 二进制 值 是 
000010001001000100010000。 现 在 ，561624 不 在 获胜 者 列表 中 。 但 是 ， 对 这 个 数字 和 557328 (一 个 
获胜 者 ) 执行 “与 ”计算 ， 会 得 到 : 

000010001001000100010000 & 


000010001000000100010000 
000010001000000100010000 


在 对 两 个 1 执行 “与 ”计算 (使 用 一 个 & 符 号 ) 时 ， 结 果 是 1。 对 于 其 他 任何 组 合 ， 结 果 都 是 0。 

在 代码 中 ， 我 们 再 把 结果 值 与 获胜 模式 值 做 比较 ， 如 果 它 们 是 相同 的 (就 像 这 里 的 情况 ) ,我 
们 就 找到 了 获胜 者 。 在 这 里 ， 这 是 从 左下 角 到 右上 角 的 对 角 线 组 合 。 

如 果 你 现在 还 怀疑 这 样 做 是 否 真 地 比 手工 计算 简便 ,请 考虑 :如果 选择 所 有 4 个 角 上 的 格子 ( 即 
格子 0、4、19 和 23 ) 也 算是 获胜 ， 那么 只 需 把 数字 8912913 添加 到 获胜 者 数组 中 ， 其 他 地 方 都 不 
需要 修改 。 
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到 目前 为 止 ， 我 们 使 用 的 所 有 数组 都 是 由 布尔 值 或 数字 组 成 的 。 作 为 最 后 一 个 与 Bingo 相关 的 示 

例 , 脚本 3-13 用 一 个 字符 串 数 组 综合 使 用 了 前 面 学 习 的 所 有 技术 , 创建 一 个 流行 的 “Buzzword Bingo" 

脚本 3-13 ”这 个 Buzzword Bingo 游戏 可 以 在 沉 闽 的 员工 会 议 上 活路 气氛 , 你 只 需 添加 自己 的 文本 字 
符 串 


var buzzwords = new Array ("Aggregate", 
"Ajax", 
"API", 
"Bandwidth", 
"Beta", 
"Bleeding edge", 
"Convergence", 
"Design pattern", 
"Disruptive", 
"DRM", 
"Enterprise", 
"Facilitate", 
"Folksonomy", 
"Framework", 
"Impact", 
"Innovate", 
"Long tail", 
"Mashup", 
"Microformats", 
"Mobile", 
"Monetize", 
"Open social", 
"Paradigm", 
"Podcast", 
"Proactive", 
"Rails", 
"Scalable", 


























56 第 3 章 第 一 个 Web 应 用 程序 
"Social bookmarks", 
"Social graph", 
"Social software", 
"Spam" , 

"Synergy", 
"Tagging", 
"Tipping point", 
"Truthiness", 
"User-generated", 
"Vlog", 
"Webinar", 
"Wiki", 
"Workflow" 

5 


var usedWords - new Array(buzzwords.length); 
window.onload - initAll; 


function initAll() ( 
if (document.getElementById) { 
document.getElementById("reload").onclick = anotherCard; 
newCard(); 
} 


else { 
alert("Sorry, your browser doesn't support this script"); 
} 
} 


function newCard() { 
for (var i=0; i«24; i++) { 
setSquare(i); 
} 


} 


function setSquare(thisSquare) { 
do { 
var randomWord = Math.floor((Math.random() * buzzwords. length)); 


while (usedWords[randomWord]); 


usedWords[randomWord] = true; 

var currSquare = "square" + thisSquare; 

document. getElementById(currSquare).innerHTML = buzzwords[randomWord]; 
document .getElementById(currSquare).className = ""; 

document. getElementById(currSquare).onmousedown = toggleColor; 


} 


function anotherCard() { 
for (var i=0; i«buzzwords.length; i++) { 
usedWords[i] = false; 
} 


newCard(); 
return false; 


} 


function toggleColor(evt) { 
if (evt) { 
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var thisSquare = evt.target; 


} 

else { 
var thisSquare = window.event.srcElement; 

} 

if (thisSquare.className == "") { 
thisSquare.className = "pickedBG"; 

} 

else { 





"n, 
3 


thisSquare.className = 


checkWin(); 
} 


function checkWin() { 
var winningOption = -1; 
var setSquares = 0; 
var winners = new Array(31,992, 15360, 507904, 541729, 557328, 1083458, 2162820, 4329736 , 8519745 , 8659472, 16252928); 


for (var i-0; i«24; i++) { 
var currSquare = "Square" + i; 
if (document.getElementById (currSquare).className != "") { 
document.getElementById (currSquare).className = "pickedBG"; 
setSquares = setSquares | Math.pow(2,i); 
} 
} 


for (var i=0; i«winners.length; i++) { 
if ((winners[i] & setSquares) == winners[i]) { 
winningOption = i; 
} 
} 


if (winningOption > -1) { 
for (var i=0; i<24; i++) ( 
if (winners[winningOption] & Math.pow(2,i)) { 
currSquare = "square" + i; 
document.getElementById (currSquare).className = "winningBG"; 
} 
} 
} 
} 


p^ 使 用 字符 串 数 组 


1. var buzzwords = new Array ("Aggregate , Ajax" , "API","Bandwidth", "Beta", Bleeding edge", 
"Convergence" , "Design pn » Disruptive","DRM", "Enterprise", "Facilitate", 
—"Folksonomy", "Framework" ,"Impact","Innovate", "Long tail","Mashup", "Microformats", 
"Mobile", "Monetize","Open social", "Paradigm","Podcast", "Proactive", "Rails","Scalable", 
"Social bookmarks", "Social graph", "Socia software", "Spam","Synergy", "Tagging", 


— "Tipping point", "Truthiness", "User-generated", "Vlog", "Webinar", "Wiki", "Workflow"); 








var usedWords = new Array(buzzwords. length); 
这 个 Buzzword Bingo 游戏 使 用 的 字符 串 都 与 “Web 2.0" AX, 但 是 你 可 以 在 buzzwords 数组 中 
添加 关于 任何 主题 的 字符 串 。 需 要 至 少 24 个 字符 串 ( 越 多 越 好 ) ， 而 且 字 符 串 不 应 该 太 长 〈 否 则 在 
格子 中 放 不 下 ) 。 除 此 之 外 没有 任何 其 他 限制 ， 你 可 以 尽量 发 挥 想 象 力 。 
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在 初始 化 字符 串 数 组 时 ， 还 需要 初始 化 一 个 新 的 布尔 值 数 组 usedWords。 把 它 的 大 小 声明 为 
buzzwords.length， 这 样 在 添加 新 字符 串 时 就 不 需要 修改 usedWords 数组 一 一 它 会 自动 地 调整 到 合适 的 
长 度 。 


2. do { 
var randomWord = Math.floor ((Math.random() * buzzwords. length)); 





while (usedWords[randomWord]); 


usedWords [randomWord] - true; 
var currSquare = "square" + thisSquare; 
document.getElementById (currSquare).innerHTML = buzzwords[randomWord]; 


决定 把 哪个 字符 串 放 在 哪个 格子 中 实际 上 更 简单 ， 因 为 任何 字符 串 可 以 放 在 任何 格子 中 ( 没有 标 
HE Bingo 游戏 中 的 编号 限制 ) 。 只 需 确保 获取 一 个 还 未 使 用 过 的 字符 串 ， 把 它 标 为 已 使 用 ， 然 后 写 到 
格子 中 。 


3. for (var i=0; i«buzzwords.length; i++) { 
usedWords[i] = false; 














与 标准 Bingo 卡片 一 样 , 在 生成 一 张 新 卡 片 时 ,必须 把 usedwords 中 的 所 有 标志 设置 为 false, 这 
样 就 可 以 再 次 使 用 它们 。 

















V 提示 
还 小 wi AT&T M-Cell 5:26 PM 9 79% ta 
& Make Your Own Bingo Card 





Q 在 旧金山 举行 的 年 度 Macworld 博 



































AS E, 通常 由 Steve Jobs 致 开幕 词 

( 因此 这 被 称 为 Steve Note )。 另 一 站 
个 传统 是 与 会 者 要 玩 SteveNote Beta | enterprise | mobile | Proactive | Long tan 
Bingo， 也 就 是 猜 猜 Steve 会 说 哪些 iid | DRM | wki | Convergence | RC 
他 喜欢 说 的 词 比 如 “Boom!” 和 Tos aer MESE Qua ue 
*One more thing..." ) 以 及 哪 WOR AG Scalable | Microformats | Socal | webinar | Framework 
的 产品 真 地 会 出 现 。 | wanes | | onae genes 

















Click here to create a new card 





口 因为 iPhone 附带 了 标准 的 Safari 
浏览 器 ， 所 以 我 在 Macworld 上 介 
绍 iPhone 之 后 展示 了 这 个 游戏 的 
oe 见 图 3-9 )。 它 非常 受 
次 迎 ， 尽 管 在 致 开幕 词 时 没有 人 真 <> ^ m tm 
unit “Bingo!” o 这 个 Bingo 示例 
也 可 用 于 其 他 突 发 新 闻 事 件 , 比如 。 图 3-9 只 需 一 个 移动 浏览 器 , 再 加 上 一 点 想象 力 , 就 
直播 的 美国 政治 辩论 。 可 以 针对 几乎 任何 场合 编写 一 个 Bingo 游戏 
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处 理 图 像 








J avaScript 最 常见 也 最 显著 的 用 途 之 一 是 在 网 页 上 添加 动画 , 从 而 在 视觉 上 更 具 吸 引力 , 这 就 是 
本 章 的 主题 。 用 JavaScript 实现 的 一 种 常见 且 有 效 的 效果 是 ， 当 用 户 将 鼠标 移动 到 图 像 上 时 ， 
会 改变 网 页 上 的 图 像 ， 这 样 页 面 就 能 对 用 户 的 操作 及 时 做 出 反应 。 这 种 称 为 翻转 器 ( rollover ) 的 效果 
很 容易 实现 ， 而 且 有 许多 应 用 场合 。 

翻转 器 是 强大 的 工具 ,除了 翻转 器 之 外 ,还 可 以 用 JavaScript 实现 很 多 效果 ， 比 如 自动 改变 图 像 、 
创建 广告 条 、 建 立 幻灯 片 和 在 页 面 上 显示 随机 图 像 。 

在 本 章 中 ， 你 将 学 习 如 何 用 JavaScript 实现 所 有 这 些 图 像 效 果 。 让 我 们 开始 吧 。 

目前 需要 了 解 的 HTML 知识 见 表 4-1。 











































































































表 4-1 目前 需要 了 解 的 HTML 知识 一 一 图 像 
ix 签 m 性 a X 
img 其 中 包含 描述 浏览 器 要 显示 的 图 像 的 属性 
src 包含 图 像 的 URL， 这 个 URL 是 相对 于 网 页 的 URL 来 说 的 
width 包含 浏览 器 显示 图 像 所 用 的 宽度 ( 以 像素 为 单位 ) 
height 包含 浏览 器 显示 图 像 所 用 的 高 度 ( 以 像素 为 单位 ) 
alt 用 来 在 非 图 形 化 浏览 器 中 替代 图 像 
id kk 























EHE, JavaScript 将 用 它 来 操纵 图 像 





4.1 创建 翻转 器 


翻转 器 背后 的 思想 很 简单 。 有 两 个 图 像 。 第 一 个 图 像 是 原始 〈original ) 图 像 ， 它 与 网 页 的 其 他 部 
分 一 起 加 载 和 显示 。 当 用 户 将 鼠标 移动 到 第 一 个 图 像 上 时 ,浏览 器 快速 地 将 第 一 个 图 像 蔡 换 为 第 二 个 
图 像 ， 即 替换 (replacement) 图 像 ， 这 样 就 产生 了 运动 或 动画 效果 。 

脚本 4-1 给 出 了 最 基本 的 翻转 器 ,所 有 代码 都 在 标准 的 图 像 链接 中 。 首 先 加 载 蓝 色 箭头 ( 见 图 4-1 ), 
当 用 户 将 鼠标 移动 到 这 个 图 像 上 时 ,用 一 个 红色 的 箭头 替代 它 〈 见 图 4-2), 当 用 户 移 走 鼠标 时 ， 重 新 
绘制 蓝 色 箭头 。 


一 些 样式 可 以 应 用 于 页 面 上 的 元 素 , 我 们 将 这 些 样式 单独 放 在 一 个 CSS 文件 中 , 如 脚本 4-2 所 示 。 



































出 
1 
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脚本 4-1 这 是 在 链接 标签 中 实现 翻转 吉 的 最 简单 方法 


<!DOCTYPE html» 

<html> 

<head> 
<title>A Simple Rollover</title> 
<link rel="stylesheet" href="script01.css"> 

</head> 

<body> 
<a href="next.html" onmouseover="document.images['arrow'].src='images/arrow_on.gif'" onmouseout- 
— "document. images[ ‘arrow’ ].src='images/arrow_off.gif'"><img src-"images/arrow off.gif" id-"arrow' 
—alt-"arrow"»«/a» 

</body> 

</html> 








eoo A Simple Rollover a eoo A Simple Rollover a 


[+| @ https://dl.dropbox.com/u/212748 C | 





+ |@ https://di.dropbox.com/u/212748 © (a Google 
































4-1 在 用 户 将 鼠标 移动 到 图 像 上 之 前 图 4-2” 当 鼠标 移动 到 图 像 上 时 , 脚本 用 


显示 的 第 一 个 图 像 第 二 个 图 像 替 换 第 一 个 图 像 


脚本 4-2 ”在 本 章 的 许多 示例 中 ， 用 于 样式 元 素 的 CSS 文件 


body { 
background-color: #FFF; 


} 
img { 

border-width: 0; 
} 


img#arrow, imgitarrowImg { 
width: 147px; 
height: 82px; 

} 


#button1, #button2 { 
width: 113px; 
height: 33px; 

} 


.centered { 
text-align: center; 


} 


#adBanner { 
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width: 400px; 
height: 75px; 
} 


> 创建 翻转 器 


1. «a href="next.html" 

HER CT XE Sy, DO ae UL, TEC BPE next. html 页 面 。 

2. onmouseover-"document.images['arrow'].src-'images/arrow on.gif'" 

当 用 户 将 鼠标 移动 到 图 像 上 时 Cid 为 arrow 的 src), images 目录 中 的 蔡 换 图 像 arow_on.gif 被 写 = 
到 文档 窗口 中 。 

3. onmouseout-"document.images ['arrow'].src- 'images/arrow off.gif'"> 

当 鼠 标 移 走 时 ，arrow_offgif 图 像 重新 显示 。 


























4. <img src="images/arrow_off.gif" id-"arrow" alt="arrow"> 

图 像 链 接 为 页 面 定义 原始 图 像 的 来 源 。 我 们 在 图 像 标签 中 包含 了 alt 属性 ， 这 是 因为 如 果 希 望 
HTML 符合 W3C 标准 ， 就 必须 有 alt 属性 (这 个 属性 为 非 图 形 化 浏览 器 提供 图 像 的 名 称 或 描述 )， 而 
且 使 用 alt 属性 有 助 于 残障 人 士 访问 你 的 页 面 ， 比 如 用 屏幕 阅读 器 浏览 页 面 的 育 人 用 户 。 
































这 种 翻转 器 的 缺点 

这 种 实现 翻转 器 的 方法 非常 简单 ， 但 是 你 应 该 知道 它 有 几 个 问题 和 缺点 。 

口 因为 第 三 个 图 像 是 在 用 户 将 和 鼠标 移动 到 第 一 个 图 像 上 时 从 服务 器 下 载 的 ， 所 以 在 第 二 个 图 
像 替换 第 一 个 图 像 之 前 ， 可 以 察觉 到 延迟 ， 这 对 于 用 调制 解 调 器 而 不 是 宽带 连接 浏览 站 点 的 
用 户 尤其 明显 。 

D 使 用 这 种 方法 在 老式 浏览 器 中 会 产生 错误 消息 ， 比 如 Netscape 2.0 或 更 早 的 版 本 、IE 3.0 或 
更 早 的 版 本 或 者 America Online 2.7 浏览 器 。 因 为 很 少 有 人 还 在 使 用 这 些 过 时 的 浏览 器 ， 所 
以 这 已 经 不 是 什么 大 问题 了 。 

我 们 建议 不 要 使 用 这 种 方法 ， 而 是 使 用 4.2 节 中 介绍 的 方法 来 创建 翻转 器 ， 从 而 解决 这 些 问 题 

乃至 更 多 。 


4.2 创建 更 有 效 的 翻转 器 


为 了 产生 动画 的 效果 ， 需 要 确保 替换 图 像 立刻 出 现 ， 而 不 能 有 从 服务 器 获得 图 像 所 造成 的 延迟 。 
为 此 ， 使 用 JavaScript 预先 将 所 有 图 像 加 载 到 浏览 器 的 缓存 中 (这样 ， 当 需要 它们 时 ， 它 们 已 经 在 用 
户 的 硬盘 上 了 )， 并 且 将 图 像 放 进 脚 本 使 用 的 变量 中 。 这 样 的 话 ， 当 用 户 将 鼠标 移动 到 图 像 上 时 ， 鹏 
本 就 会 用 包含 替换 图 像 的 第 二 个 变量 替换 包含 原 图 像 的 变量 。 脚 本 4-3 演示 了 具体 的 做 法 。 视 觉 效 果 
与 图 4-1 和 图 4-2 相同 ， 但 是 动画 更 加 流畅 。 
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脚本 4-3 这 个 HTML 页 面 上 唯一 的 JavaScript 是 对 外 部 .js 文件 的 引用 


<!DOCTYPE html» 
<html> 
<head> 
<title>A More Effective Rollover</title> 
«script src="scripto2.js"></script> 
<link rel="stylesheet" href="script01.css"> 
</head> 
<body> 
«a href-"nexti.html"»«img src="images/button1_off.gif" alt-"buttoni" id="button1"></a>&nbsp; &nbsp; 
«a href="next2.html"><img src="images/button2_off.gif" alt="button2" id="button2"></a> 
</body> 
</html> 


为 了 使 JavaScript 更 便于 管理 ,我 们 将 JavaScript 代码 从 HTML 页 面 中 提取 出 来 并 将 它 放 进 外 部 .j 
文件 中 ， 见 脚本 4-4 (关于 .js 文件 的 更 多 知识 见 第 2 章 )。 
脚本 4-4 这 是 比 脚本 4-1 更 好 的 实现 翻转 器 的 方法 ， 因 为 它 要 灵活 得 多 


window.onload = rolloverInit; 














NT 
> 
a 

un 





function rolloverInit() { 
for (var i=0; i<document.images.length;i++) ( 
if (document.images[i].parentNode.tagName -- "A") ( 
setupRollover(document.images[i]); 


) 


function setupRollover(thisImage) ( 
thisImage.outImage = new Image(); 
thisImage.outImage.src = thisImage.src; 
thisImage.onmouseout = function() { 
this.src = this.outImage.src; 
} 


thisImage.overImage = new Image(); 
thisImage.overImage.src = "images/" + thisImage.id + 
thisImage.onmouseover = function() { 

this.src = this.overImage. src; 
} 


_on.gif"; 


} 


> 创建 更 好 的 翻转 器 








1. <script src="scripto02.js"></script> 

这 个 标签 在 HTML 页 面 ( 见 脚本 4-3 ) 中 。 它 使 用 src 属性 向 浏览 器 说 明 到 哪里 寻找 外 部 js 文件 ， 
也 就 包含 JavaScript 的 文件 。 

2. «a href="next1.html"><img src-"images/buttoni off.gif" alt="button1" id="button1"> </a> 




















—&nbsp; &nbsp; 

«a href="next2.html"><img src-"images/button2 off.gif" alt="button2" id="button2"></a> 

这 两 个 标签 仍然 在 脚本 4-3 中 ， 它 们 是 用 于 按钮 的 典型 链接 标签 ， 其 中 藤 入 了 图 像 标签 。href 
属性 描述 当 用 户 单 击 链接 时 链接 的 目标 。 在 img 标签 中 ，src 属性 提供 在 用 户 将 鼠标 移动 到 图 像 上 
之 前 显示 的 图 像 的 路 径 。 链接 标签 也 定义 了 图 像 的 alt 文 本。 注意 , 这 两 个 按钮 都 有 id 属性 。 正 如 第 
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1 章 描述 的 ，id 对 于 每 个 对 象 必 须 是 唯一 的 。 脚 本 使 用 图 像 的 id 使 翻转 器 发 挥 作用 。 
3. window.onload = rolloverInit; 
现在 转 到 脚本 4-4， 当 页 面 完 成 加 载 时 , 会 触发 window.onload 事件 处 理 程序 。 这 个 处 理 程序 调用 

rolloverInit() pa. 

这 里 使 用 这 个 处 理 程序 确保 在 页 面 完 成 加 载 之 前 脚本 不 会 执行 。 这 是 因为 在 页 面 完 成 加 载 之 前 ， 
页 面 上 的 某 些 元 素 如 果 还 没有 加 载 ， 引 用 页 面 上 的 元 素 可 能 会 导致 错误 。 

4. function rolloverInit() { 

for (var i=0; i«document.images. length; i++) { 

rollovetrInit() 函 数 扫 摘 页 面 上 的 每 个 图 像 ， 检 查 图 像 外 边 的 标签 是 否 是 ca> 标 签 ， 如 果 是 ， 就 说 
明 它 是 一 个 链接 。 这 两 行 中 的 第 一 行 是 函数 的 开头 。 第 二 行 开始 一 个 for...next 循环 ， 这 个 循环 遍历 
所 有 图 像 。 它 首先 将 计数 器 变量 i 设置 为 0。 然 后， 在 每 次 循环 述 代 中 ， 如 果 i 的 值 小 于 文档 中 的 图 
像 数量 ， 就 将 i 递增 1。 

5. if (document.images[i].parentNode.tagName == "A") ( 

这 里 检查 包围 图 像 的 标签 是 否 是 锚 标 签 。 检 查 方法 是 查看 对 象 的 值 是 否 为 A CA 是 锚 标 签 的 名 
称 )。 我 们 来 仔细 看 看 这 里 的 表达 式 。 第 一 部 分 document.images[i] 是 当前 的 图 像 。 它 的 parentNode 
遇 性 是 包围 它 的 容器 标签 ， 而 tagName 提供 容器 标签 的 名 称 。 所 以 ， 圆 括号 中 代码 的 意思 是 :“ 对 于 这 
个 特定 的 图 像 ， 包 围 它 的 标签 是 A 吗 ? ” 

6. setupRollover(document.images[i]); 

如 果 步 又 5 中 的 测试 结果 是 true， 那 么 调用 setupRollover KARE MA ENA o 

7. function setupRollover(thisImage) { 

在 逐 行 查看 这 个 函数 之 前 ， 先 看 一 下 整个 函数 的 作用 : 这 个 函数 将 两 个 新 的 属性 添加 到 传递 给 它 的 
图 像 对 象 中 。 新 的 属性 是 outImage ( 鼠标 不 在 图 像 上 时 的 图 像 版 本 ) 和 overImage ( 鼠标 在 图 像 上 时 的 
图 像 版 本 )， 它 们 本 身 都 是 图 像 对 象 。 因 为 它们 是 图 像 对 象 ， 所 以 被 创建 后 ， 就 可 以 添加 它们 的 src 属 
性 了 。outImage 的 src 值 是 当前 图 像 的 src，overImage 的 src 值 是 根据 原 图 像 的 id 属性 计算 出 来 的 。 

这 一 行 开始 setupRollover 函数 ， 其 参数 是 前 面 的 rolloverInit() 函 数 传递 给 它 的 图 像 。 

8. thisImage.outImage = new Image(); 

这 一 行 获得 传递 进来 的 图 像 对 象 , 并 在 其 中 添加 新 的 outImage 属性 。 因 为 可 以 在 对 象 上 添加 任 
何 类 型 的 属性 ， 而 且 属 性 本 身 也 是 对 象 ， 所 以 这 里 的 操作 是 将 一 个 图 像 对 象 添 加 到 图 像 中 。 新 的 图 
像 对 象 的 圆 括号 是 可 选 的 ， 但 这 是 良好 的 做 法 。 如 果 需 要 的 话 ， 可 以 通过 传递 参数 设置 新 图 像 对 象 
的 属性 。 

9. thisImage.outImage.src = thisImage.src; 

现在 , 将 新 的 outImage 的 来 源 设置 为 与 thisImage 的 来 源 相 同 。 页 面 上 的 默认 图 像 也 就 是 鼠标 不 
在 图 像 上 时 看 到 的 图 像 。 

10. thisImage.onmouseout = function() { 

this.src = this.outImage.src; 






























































































































































































































































I 
第 一 行 开 始 定义 一 个 匿名 函数 ( 也 就 是 没有 函数 名 的 函数 ) 。 可 以 给 它 指 定 一 个 名 称 〈 比如 
roll0ut() ) ， 但 是 因为 它 只 有 一 行 代码 ， 所 以 不 需要 命名 。 
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在 这 里 ， 我 们 告诉 浏览 器 当 用 户 把 鼠标 移出 图 像 时 应 该 触发 什么 操作 。 当 发 生 这 种 情况 时 ， 和 希望 





ca 
器 

















如 像 源 恢复 为 最 初 的 值 ， 也 就 是 图 像 的 outImage 版 本 。 


11. thisImage.overImage = new Image(); 
thisImage.overImage.src = "images/" + thisImage.id + " on.gif"; 


在 第 一 行 中 ， 创 建 一 个 新 的 图 像 对 象 ， 


它 将 包含 图 像 的 overImage 版 本 。 第 二 行 设置 overImage 














的 来 源 。 它 将 "images/" 和 图 像 的 id (在 脚本 4-3 中 ,我 们 看 到 这 些 id 是 buttoni 和 button2 ) 拼接 起 
来 ， 再 加 上 "on.gif"， 从 而 在 运行 时 构造 出 源 文件 名 。 


12. thisImage.onmouseover = function() { 





this.src = this.overImage.src; 
} 
这 是 为 一 个 匿名 函数 。 它 告诉 浏览 器 ， 
设置 为 overImage 版 本 ， 见 图 4-3 和 图 4-4。 











当 用 户 将 鼠标 移动 到 图 像 上 时 ， 应 该 把 当前 图 像 的 源 重 新 











eoo A More Effective Rollover 
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Q 原 图 像 和 替换 图 像 的 尺寸 应 该 相同 。 
可 能 不 理想 。 








像 上 时 ， 翻 转 器 会 发 挥 作 用 





O 在 为 翻转 器 准备 图 像 时 ， 要 确保 所 有 GIF 图 像 或 者 PNG 图 像 都 是 不 透明 的 。 如 果 它 们 是 透明 
的 ， 那 么 会 透 过 透明 的 图 像 看 到 被 替换 掉 的 图 像 ， 这 不 是 我 们 需要 的 效果 。 





























https/ d.dropbox.com/u/2127486 jsvas8 /ch04/nextl html A https://di.dropbox.com[u/2127486/jsvas8/ch04 [next2.html mud 
图 4-3 ”也 可 以 在 同一 页 面 上 建立 多 个 翻转 器 图 4-4 移动 到 第 二 个 翻转 器 上 
V 提示 





























否则 , 一 些 浏 览 器 会 替 你 重新 设置 信 寸 ,而 调整 后 的 结果 





O 在 前 面 的 示例 中 ， 当 把 鼠标 移动 到 链接 上 时 ， 翻 转 器 会 发 挥 作用 。 在 这 里 ， 当 把 鼠标 移动 到 图 








就 是 说 ，onmouseover 和 onmouseout 现在 附 在 图 像 上 ， 而 不 














是 链接 。 尽 管 这 两 种 方法 往往 产生 同样 的 效果 , 但 是 有 一 个 大 的 差异 : 一 些 比较 老式 的 浏览 








(Netscape 4 及 更 早 的 版 本 ,IE 3 及 更 早 的 版 本 ) 在 img 标 签 上 不 支持 onmouseover FH onmouseout- 
O 你 可 能 认为 , 因为 HTML 页 面 上 的 所 有 标签 都 是 小 写 的 , 所 以 tagName 应 该 与 小 写 的 a 进行 比 


较 。 但 是 ， 这 不 行 。tagName 总 是 返 


4.3 构建 三 状态 翻转 器 





回 大 写 的 值 。 








三 状态 翻转 器 就 是 能 够 显示 图 像 的 3 个 版 本 的 翻转 器 。 除 了 原始 图 像 和 当 用 户 将 鼠标 移动 到 图 
像 上 时 显示 的 图 像 之 外 ， 图 像 还 有 第 三 个 版 本 ， 这 个 版 本 在 按钮 本 身 被 单 击 时 显示 ， 见 图 4-5。 

















43 构建 三 状态 翻转 器 65 














“state Rollovers - Mozilla Firefox ONE yy else RE 


File Edit View History Bookmarks Tools Help 
Gc A — https:/ 1. | 1- Go: sil 


|. | Three-state Rollovers bel - 


ENTM euron z 















https://dl.dropbox.com/u/2127486/jsvqs8/ch04/nextl.html a 


图 4-5” 当 单 击 按钮 时 ， 显示 第 三 个 图 像 (在 这 种 灰 度 图 中 很 难看 到 
这 种 效果 , 在 本 书 的 配套 Web 站 点 上 可 以 看 到 完整 的 效果 ) 


脚本 4-5 (HTML 文件 ) 看 起 来 几乎 与 前 面 的 脚本 4-3 完全 相同 。 实 际 上 ， 只 是 文档 的 标题 和 调 
用 的 外 部 JavaScript 文件 名 有 差异 。 这 正 说 明了 将 所 有 JavaScript 放 进 外 部 文件 中 是 多 么 有 意义 。 你 可 
以 在 页 面 中 增加 功能 ， 而 不 需要 修改 HTML 页 面 。 


脚本 4-5 由 于 将 JavaScript 放 在 外 部 文件 中 ， 三 状态 翻转 器 的 HTML 实质 上 与 两 状态 翻转 带 相 同 


<!DOCTYPE html» 
<html> 
<head> 
<title>Three-state Rollovers</title> 
<script src="script03.js"></script> 
<link rel="stylesheet" href= "script01.css"> 
</head> 
<body> 
«a href-"nexti.html"»«img src-"images/buttoni off.gif" alt-"buttoni" id="button1"></a>&nbsp; &nbsp; 
«a href-"next2.html"»«img src- "images/button2 off.gif" alt-"button2" id-"button2"»«/a» 
«/body» 
</html> 


在 脚本 4-6 ( 外 部 JavaScript 文件 ) F, 与 脚本 4-4 相 比 只 有 几 处 修改 。 我 们 不 必 再 次 逐 行 研 究 整 
个 脚本 ， 只 需 关 注 修改 的 地 方 。 我 们 讨论 的 脚本 部 分 以 粗 体 显示 。 


脚本 4-6 ”这 个 脚本 可 以 产生 三 状态 翻转 融 


window.onload = rolloverInit; 






























































function rolloverInit() { 
for (var i=0; i<document.images.length;i++) { 
if (document.images[i].parentNode.tagName == "A") { 
setupRollover(document.images[i]); 
} 
} 
} 


function setupRollover(thisImage) { 
thisImage.outImage = new Image(); 
thisImage.outImage.src = thisImage.src; 
thisImage.onmouseout = function() { 
this.src = this.outImage.src; 


} 
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thisImage.clickImage = new Image(); 
thisImage.clickImage.src = "images/" + thisImage 
thisImage.onclick = function() { 

this.src = this.clickImage.src; 
} 


thisImage.overImage = new Image(); 


thisImage.overImage.src = "images/" + thisImage.id + 


thisImage.onmouseover = function() { 
this.src = this.overImage.src; 


} 


构建 三 状态 翻转 器 


.id + "_click.gif"; 


" on.gif"; 








1. thisImage.clickImage = new Image(); 
thisImage.clickImage.src 


在 setupRollover()PRZrB, 我 们 需要 添加 第 三 个 
创建 一 个 新 的 图 像 对 象 ， 它 将 包含 图 
"images/" 和 














2. thisImage.onclick = function() { 
this.src = this.clickImage.src; 





这 一 行 告诉 浏览 器 ， 当 用 
置 为 图 像 的 clickImage 版 本 。 


4.4 由 链接 触发 翻转 器 


PE 








"images/" + thisImage.id + 


' click.gif"; 





像 的 clicklImage 版 本 。 
图 像 的 id 拼接 起 来 ， 再 加 上 "click.gif"， 从 而 


图 像 上 单 击 鼠标 时 ， 


图 像 属性 ， 它 用 于 单 击 状态 。 在 第 一 行 中 , RN 
第 二 行 设 置 clickImage 的 来 源 。 它 将 


在 运行 时 构造 出 源 文件 名 。 





应 该 做 什么 。 在 这 种 情况 下 ， 将 图 像 的 来 源 设 


在 前 面 的 示例 中 ， 用 户 都 是 通过 将 鼠标 移动 到 图 像 上 来 触发 翻转 咒 。 但 是 ， 也 可 以 让 翻转 器 


在 用 户 将 鼠标 指向 文本 链接 时 翻转 ， 如 
个 链接 和 一 个 图 


























个 翻转 器 

| o 
@ Link Rollover - Internet Explorer provided by Dell Erm] 
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we ste | @ Link Rollover fh > By od v E Page v G Tools ~ 
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@ Internet | Protected Mode: On R10% + 




















图 4-6 “文本 链接 是 这 个 翻转 器 的 触发 元 素 





图 


图 4-6 和 图 4-7 所 示 。 这 个 HTML 页 面 非常 简单 ， 只 有 一 
像 ， 见 脚本 4-7。 我 们 将 前 面 示例 中 使 用 的 脚本 修改 为 脚本 4-8 这 样 ， 从 而 实现 这 












































f Link Rollover - Internet Explorer provided by Dell lelo je 
QU ~ |) http://wwwjavascriptworld.com/ v | #7 | x | | Live Searc Qe 
File Edit View Favorites Tools Help 
vw de | @ Link Rollover fh By a v bp Page v G Tools v 
Next page 
| http://www.javi @ Internet | Protected Mode: On 100% + 
2 已 Me A. uU 
4-7” 当 用 户 将 鼠标 指向 链接 时 ， 下 面 的 图 像 会 发 








生变 化 


44 ”由 链接 触发 翻转 器 ”67 





脚本 4-7 这 个 脚本 显示 由 文本 链接 触发 的 翻转 带 的 HTML 


<!DOCTYPE html> 
<html> 
<head> 
<title>Link Rollover</title> 
<script src-"script04.js"»«/script» 
<link rel="stylesheet" href="script01.css"> 
</head> 
<body> 
<h1><a href="next.html" id-"arrow"»Next page</a></h1> 
<img src-"images/arrow off.gif" id-"arrowImg" alt="arrow"> 
«/body» 
«/html» 


脚本 4-8 这 里 是 由 文本 链接 触发 的 翻转 器 的 JavaScript 


window.onload = rolloverInit; 





function rolloverInit() { 
for (var i=0; i<document.links.length;i++) { 
var linkObj = document.links[i]; 
if (linkObj.id) { 
var imgObj = document.getElementById(linkObj.id + "Img"); 
if (imgObj) { 
setupRollover(linkObj, imgObj) ; 


} 


function setupRollover(thisLink,thisImage) { 
thisLink.imgToChange = thisImage; 
thisLink.onmouseout = function() { 
this.imgToChange.src = this.outImage.src; 


thisLink.onmouseover = function() { 
this.imgToChange.src = this.overImage.src; 


thisLink.outImage = new Image(); 
thisLink.outImage.src = thisImage.src; 


thisLink.overImage = new Image(); 
thisLink.overImage.src = "images/" + thisLink.id + 


_on.gif"; 


} 
F^ 由 链接 触发 翻转 器 


1. function rolloverInit() { 

for (var i=0; i<document.links.length; i++) { 
首先 开始 rolloverInit() 函 数 ， 然 后 开始 一 个 循环 ， 这 与 本 章 前 面 的 示例 很 相似 。 但 是 ， 以 前 
寻找 的 是 图 像 (document ,images.length )， 而 这 里 要 寻找 链接 ( document.links.length )。 这 个 循环 
首先 将 计数 器 变量 1 设置 为 0。 在 每 次 交代 中 ， 如 果 i 的 值 小 于 文档 中 的 链接 数量 ， 就 将 递增 1。 
2. vax linkObj = document.links[i]; 


我 们 创建 link0bj 变量 并 将 它 设置 为 当前 链接 。 
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3.if (linkObj.id) { 
var imgObj = document.getElementById(linkObj.id + "Img"); 
如 果 linkobj 有 id， 就 检查 页 面 上 是 否 有 对 应 的 图 像 元 素 ， 这 个 元 素 的 id 是 1ink0bj 的 id 加 上 
Img。 如 果 有 这 样 的 元 素 ， 就 将 它 放 进 新 变量 img0bj 中 。 
4. if (img0bj) { 
setupRollover(linkObj, imgObj) ; 
如 果 imgobj 存在 ， 那 么 调用 setupRollover() PAA, HERI AMERI RARER E s 
5. function setupRollover(thisLink, thisImage) { 
thisLink.imgToChange = thisImage; 
在 setupRollover()'P, 首先 利用 步 又 4 中 传递 给 它 的 链接 和 图 像 参数 , 在 链接 对 象 中 添加 一 个 新 
的 属性 imgToChange。 JavaScript 需要 知道 当 鼠 标 停留 在 链接 上 时 要 改变 哪个 图 像 , imgToChange 用 来 存 
储 这 一 信息 。 
6. thisLink.onmouseout = function() { 
this.imgToChange.src = this.outImage.src; 
























































thisLink. onmouseover 
this. imgToChange. src 


function() { 
this.overImage.src; 


mouseOver 和 mouseOut 被 触发 时 ， 与 本 章 前 面 的 示例 稍 有 不 同 : 现在 重新 设置 this . imgToChange. 
src， 而 不 是 设置 this.src 本 身 。 

V 提示 

口 可 以 使 用 这 种 技术 向 用 户 提供 预览 , 让 他 们 提前 了 解 单 击 所 指向 的 链接 之 后 将 看 到 的 内 容 。 例 
dn, 假设 有 一 个 旅游 站 点 描述 苏格兰 、 塔 希 提 上 岛 和 克利 夫 兰 等 地 的 风光 。 在 页 面 的 左边 是 一 栏 
文本 链接 ,每 个 旅游 目的 地 有 一 个 链接 ; 在 右边 是 一 个 预览 区 域 , 其 中 显示 一 个 图 像 。 当 用 户 
将 鼠标 指向 一 个 目的 地 名 称 时 , 在 预览 区 域 中 显示 此 地 的 一 张 图 片 。 单 击 链接 就 会 将 用 户 带 入 
一 个 新 页 面 ， 这 里 详细 描述 此 地 的 著名 旅游 景点 。 


4.5 让 多 个 链接 触发 一 个 翻转 器 


到 目前 为 止 , 你 已 经 看 到 了 在 将 鼠标 移动 到 一 个 图 像 (或 者 与 这 个 图 像 相 关联 的 链接 ) 上 时 ， 如 
何 触发 翻转 器 效果 。 但 是 ， 还 可 以 让 几 个 不 同 的 图 像 触 发 同一 个 翻转 器 。 如 果 需 要 对 多 个 网 像 进 行 说 
明 ， 这 种 技术 就 非常 有 用 。 将 鼠标 移动 到 其 中 一 个 图 像 上 时 ， 就 会 显示 对 这 个 图 像 的 描述 。 在 这 个 示 
例 中 ， 我 们 对 Leonardo da Vinci (352553 ) 的 三 项 发 明 的 图 像 应 用 这 种 技术 。 当 用 户 将 鼠标 移动 到 其 
中 一 个 图 像 上 时 ， 对 这 个 图 像 的 描述 就 会 出 现在 文本 框 中 。 描 述 本 身 是 另 一 个 图 像 。 更 精确 地 说 ， 它 
是 三 个 图 像 ， 对 于 三 项 发 明 各 有 一 个 图 像 。 图 4-8 显示 脚本 4-9 (HTML )、 脚 本 4-10 (CSS) 和 脚本 
4-11 (JavaScript) 的 效果 。 与 本 书 中 的 大 多 数 脚 本 一 样 ， 它 是 在 前 面 示例 的 基础 上 构建 的 ， 所 以 我 们 
只 解释 新 概念 。 脚 本 4-8 与 脚本 4-11 相 比 只 有 几 行 代码 不 一 样 。 
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Í LÙ Multiple Links Single Rollover — [| 二 
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Flying Machine 














| https://dl.dropbox.com/u/2127486 /jsvqs8 /ch04 /flyPage.html a 


4-8 这 个 页 面 上 有 3 个 交互 式 图 像 ， 一 个 飞行 器 、 一 个 水 箱 和 一 个 直升机 。 当 用 户 
将 鼠标 移动 到 图 像 上 时 ， 对 它 的 描述 就 会 出 现在 达 芬 奇 的 画像 下 面 


脚本 4-9 注意 ， 这 个 页 面 上 的 链接 和 图 像 都 有 唯一 的 id 


<!DOCTYPE html» 
<html> 
<head> 
<title>Multiple Links, Single Rollover </title> 
<script src="script05.js"></script> 
<link rel="stylesheet" href="script02.css"> 
</head> 
<body> 
<div id="captionDiv"> 
<img src="images/DaVinci. jpg" width="144" height="219" alt="DaVinci"> 
<img src-"images/bg.gif" id-"captionField" alt="Text Field"> 
</div> 
<div id="inventionDiv"> 
<img src-"images/leoText.gif" id-"heading" alt-"Leonardo's Inventions"> 
«a href-"flyPage.html" class- "captionField" id-"flyer"»«img src- "images/flyer.gif" width-"293" 
—height-"165" alt-"Flying Machine" id-"flyerImg"»«/a» 
«a href-"tankPage.html" class= "captionField" id="tank"><img src-"images/tank.gif" width="325" 
—height-"92" alt-"Tank" id-"tankImg"»«/a» 
«a href-"heliPage.html" class-"captionField" id-"helicopter"»«img src-"images/helicopter.gif" 
—width-"224" height-"160" alt-"Helicopter" id-"helicopterImg"»«/a» 
</div> 
</body> 
</html> 


脚本 4-10 ”在 这 个 CSS 文件 中 ,我们 定义 在 HTML 中 引用 的 类 


body { 
background-color: #EC9; 























} 


img { 
border-width: 0; 
} 





70 第 4 章 处 理 图 像 





#captionDiv { 
float: right; 
width: 210px; 
margin: auto 50px; 


} 


#captionField { 
margin: 20px auto; 
width: 208px; 
height: 27px; 

} 


#inventionDiv { 
width: 375px; 
margin-left: 20px; 


} 

#heading { 
margin-bottom: 20px; 
width: 375px; 
height: 26px; 

} 


脚本 4-11 这 个 脚本 演示 如 何 使 用 多 个 链接 触发 一 个 翻转 器 


window.onload = rolloverInit; 


function rolloverInit() { 
for (var i=0; i<document.links.length;i++) { 
var linkObj = document. links[i]; 
if (linkObj.className) { 
var imgObj = document.getElementById(linkObj.className); 
if (imgObj) { 
setupRollover(linkObj, imgObj); 
} 
j 
} 
} 


function setupRollover(thisLink,textImage) { 
thisLink.imgToChange = textImage; 
thisLink.onmouseout = function() { 
this.imgToChange.src = this.outImage.src; 
} 
thisLink.onmouseover = function() { 
this.imgToChange.src = this.overImage.src; 


thisLink.outImage = new Image(); 
thisLink.outImage.src = textImage.src; 


thisLink.overImage = new Image(); 
thisLink.overImage.src = "images/" +thisLink.id + "Text.gif"; 
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1. if (linkObj.className) { 
var imgObj = document.getElementById(linkObj.className); 
无 法 使 用 翻转 图 像 的 id 计算 出 改变 过 的 图 像 的 id,， 这 是 因为 id 必须 是 唯一 的 ， 而 所 有 翻转 图 像 
必须 为 改变 过 的 图 像 的 目的 地 提供 同样 的 值 。 因 此 ， 我 们 要 使 用 class 属性 〈 因 为 多 个 页 面 元 素 可 以 
共享 同一 个 class), 在 这 一 行 上 ， 寻 找 链接 对 象 的 className。 


2. function setupRollover(thisLink,textImage) { 
thisLink.imgToChange = textImage; 


我 们 将 当前 链接 对 象 (thisLink ) 和 图 像 对 象 ( 我 们 称 之 为 textImage ) 传递 给 setupRollover() 
函数 。 注 意 ， 在 传递 这 些 对 象 (也 可 以 称 为 变量 ) 时 ， 分 别 将 它们 称 为 link0bj 和 imgObj. 
脚本 其 余部 分 的 工作 方式 与 本 章 前 面 的 示例 相同 。 


4.6 处理 多 个 翻转 器 


如 果 和 希望 触发 翻转 器 的 图 像 本 身 也 是 一 个 翻转 器 ， 那 么 应 该 怎么 办 ? 图 4-9 在 前 一 个 示例 的 基础 
上 进行 了 改进 ,演示 如 何 添 加 这 个 特性 。 在 将 鼠标 移动 到 一 个 自 创 图 像 上 时 ,与 前 面 一 样 ， 描 述 图 像 
会 出 现 , 但 是 现在 自 创 图 像 本 身 也 会 切换 为 男 一 个 带 阴影 的 图 像 。 这 会 向 用 户 提供 视觉 反馈 ,明确 地 
指出 鼠标 当前 指向 的 元 素 ( 鼠标 指针 本 身 的 指示 效果 可 能 不 够 明显 )。 脚本 4-12 是 HTML 页 面 (除了 
标题 和 调用 的 外 部 JavaScript 文件 名 之 外 ， 没 有 变化 )， 脚 本 4-13 显示 了 与 前 面 的 示例 相 比 增加 的 
JavaScript 代码 。 
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4-9 在 将 鼠标 移动 到 一 个 图 像 上 时 ， 描 述 会 出 现 ， 而 且 图 像 本 身 会 加 上 阴影 
脚本 4-12 除了 标题 和 外 部 脚本 的 引用 之 外 ， 这 个 HTML 与 脚本 4-9 相同 


<!DOCTYPE html> 

<html> 

<head> 
<title>Multiple Links, Multiple Rollovers</title> 
<script src="script06.js"></script> 
<link rel="stylesheet" href="script02.css"> 
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</head> 
<body> 
<div id="captionDiv"> 
<img src="images/DaVinci. jpg" width="144" height-"219" alt="DaVinci"> 
<img src-"images/bg.gif" id-"captionField" alt-"Text Field"> 
</div> 
<div id="inventionDiv"> 
<img src-"images/leoText.gif" id-"heading" alt-"Leonardo's Inventions"> 
«a href-"flyPage.html" class-"captionField" id="flyer"><img src-"images/flyer.gif" width-"293" 
—height-"165" alt-"Flying Machine" id-"flyerImg"»«/a» 
«a href-"tankPage.html" class-"captionField" id="tank"><img src-"images/tank.gif" width="325" 
—height-"92" alt-"Tank" id="tankImg"></a> 
«a href-"heliPage.html" class-"captionField" id-"helicopter"»«img src-"images/ helicopter.gif" 
—width-"224" height-"160" alt-"Helicopter" id-"helicopterImg"»«/a» 
«/div» 
</body> 
</html> 


脚本 4-13 ”这 个 脚本 处 理 多 个 翻转 带 


window.onload = rolloverInit; 


function rolloverInit() { 
for (var i=0; i«document.links.length; i++) { 

var linkObj = document. links[i]; 

if (linkObj.className) { 
var imgObj - document.getElementById(linkObj.className); 
if (imgObj) { 

setupRollover(linkObj, imgObj); 

} 


} 
} 
} 


function setupRollover(thisLink,textImage) { 
thisLink.imgToChange = new Array; 
thisLink.outImage = new Array; 
thisLink.overImage = new Array; 


thisLink.imgToChange[0] = textImage; 
thisLink.onmouseout = rollOut; 
thisLink.onmouseover = rollOver; 


thisLink.outImage[0] = new Image(); 
thisLink.outImage[0].src = textImage.src; 


thisLink.overImage[0] = new Image(); 
thisLink.overImage[0].src = "images/" + thisLink.id + "Text.gif"; 


var rollover0bj = document.getElementById(thisLink.id + "Img"); 
if (rolloverObj) { 
thisLink.imgToChange[1] = rollover0bj; 


thisLink.outImage[1] = new Image(); 
thisLink.outImage[1].src = rollover0bj.src; 


thisLink.overImage[1] = new Image(); 
thisLink.overImage[1].src = "images/" + thisLink.id + 


_on. gif"; 
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function rollOver() { 
for (var i-0;i«this.imgToChange.length; i++) { 
this.imgToChange[i].src = this.overImage[i].src; 


} 


function rollout() { 
for (var i=0;i<this.imgToChange.length; i++) { 
this. imgToChange[i].src = this.outImage[i].src; 


} 
> 处 理 多 个 翻转 器 


1. thisLink.imgToChange = new Array; 


thisLink.outImage = new Array; 
thisLink.overImage = new Array; 


添加 这 些 行 ， 是 因为 这 个 脚本 有 更 多 的 图 像 需 要 处 理 ( 每 个 翻转 器 有 两 个 图 像 )。 在 每 一 行 中 
我 们 为 thisLink 创建 一 个 新 属性 ， 每 个 属性 都 是 一 个 数组 (array )。 

2. thisLink.imgToChange[0] = textImage; 

在 前 一 节 中 ，imgToChange 是 一 个 图 像 ， 但 是 在 这 里 ， 它 是 一 个 包含 图 像 的 数组 。 在 这 一 行 中 ， 
textImage 被 存储 在 imgToChange 的 第 一 个 元 素 中 。 


3. thisLink.outImage[0] = new Image(); 
thisLink.outImage[0].src = textImage.src; 


与 前 面 一 样 ， 需 要 存储 图 像 的 outImage 版 本 ， 但 是 这 一 次 它 被 存储 在 outImage 数组 的 第 一 个 元 
素 中 。 


4. thisLink.overImage[0] = new Image(); 
thisLink.overImage[0].src = "images/" + thisLink.id + "Text.gif"; 


同样 ， 计 算出 图 像 的 overImage 版 本 的 文件 名 并 将 其 存储 在 overImage 数组 的 第 一 个 元 素 中 。 


5. var rolloverObj = document.getElementById(thisLink.id + "Img"); 
if (rolloverObj) { 


现在 ,需要 查 明 这 个 翻转 带 是 否 将 触发 多 个 图 像 ， 而 不 只 是 一 个 图 像 。 如 果 是 这 种 情况 ,，HTML 
页 面 上 就 会 有 一 个 对 应 的 元 素 ， 它 的 id 是 当前 链接 的 id 加 上 Img。 也 就 是 说 ， 如 果 正 在 操作 flyer 
链接 ， 就 检查 页 面 上 是 否 有 flyerImg 元 素 。 如 果 有 ， 就 将 它 保 存在 rolloverobj 中 ,并且 应 该 执行 下 
面 三 步 。 

6. thisLink.imgToChange[1] = rolloverObj; 

现在 ， 按 照 前 面 设置 imgToChange[o] 的 方式 ， 将 imgToChange[1] (数组 中 的 第 二 个 元 素 ) 设置 为 
新 的 rollover0bj。 当 触发 onmouseout 和 onmouseover 事件 处 理 程序 时 ， 两 个 图 像 将 被 替换 为 它们 的 
替代 版 本 ， 我 们 将 在 稍 后 看 到 这 一 点 。 

7. thisLink.outImage[1] = new Image(); 

thisLink.outImage[1].src = rollover0bj.src; 


这 将 outImage 数组 的 第 二 个 元 素 设 置 为 图 像 的 outImage 版 本 。 
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8. thisLink.overImage[1] = new Image(); 
thisLink.overImage[1].src = "images/" + thisLink.id + " on.gif"; 


这 里 计算 出 图 像 的 overImage 版 本 的 文件 名 并 将 其 存储 在 overImage 数组 的 第 二 个 元 素 中 。 
如 果 由 于 某 种 原因 ,在 同一 翻转 器 执行 期 间 还 需要 改变 第 三 个 图 像 ， 那 么 应 该 对 第 三 个 图 像 对 象 
重复 步 又 6~8。 


9. for (var i-0; i«this.imgToChange.length; i++) { 
this.imgToChange[i].src = this.overImage[i].src; 


















































这 段 代 码 在 rollover () PACH , 这 里 是 对 图 像 进行 切换 的 地 方 。 因 为 可 能 要 改变 一 个 或 多 个 图 像 ， 
所 以 首先 需要 了 解 已 经 存储 了 多 少 个 图 像 ， 也 就 是 this.imgToChange.length 的 值 。 在 这 个 示例 中 ， 
这 个 值 是 2， 因 为 有 两 个 图 像 需 要 改变 。 然 后 进行 两 次 迭代 , 将 imgToChange[0] 和 imgToChange[1] 的 
来 源 设 置 为 对 应 的 overImage 值 。 


10. for (var i-0; i«this.imgToChange.length; i++) { 
this.imgToChange[i].src = this.outImage[i].src; 
































HEARE rollout (Keh, 它 在 本 质 上 与 前 一 步 中 的 代码 相同 , 唯一 的 差异 是 将 这 些 图 像 设置 
为 outImage 版 本 的 来 源 值 。 
V 提示 
OQ 一 定 要 记 住 ， 翻 转 的 每 个 图 像 必须 具有 唯一 的 id. 
O 如 果 想 让 页 面 上 的 一 些 链接 触发 多 个 翻转 器 ， 而 其 他 链接 只 是 单独 的 翻转 器 ， 那 么 应 该 怎么 
做 ? 没 问 题 ， 甚 至 不 需要 修改 JavaScript REPR 5 中 的 检查 没有 在 页 面 上 找到 替代 id， 就 
不 会 存储 第 二 个 元 素 ，roll0ver() 和 roll0ut() 中 的 循环 只 使 用 初始 图 像 。 


4.7 创建 循环 的 广告 条 


在 Web 上 冲浪 时 ， 常 常会 见 到 定期 在 图 像 之 间 切 换 的 广告 条 。 其 中 一 部 分 是 动画 GIF 文件 ， 这 
种 GIF 文件 包含 许多 帧 连续 播放 的 图 像 ， 其 他 的 是 Flash 动画 。 如 果 和 希望 页 面 循 环 显示 许多 GIF (无 
论 是 否 是 动画 )， 那 么 可 以 使 用 JavaScript 来 实现 ， 就 像 脚 本 4-15 中 那样 。 这 个 示例 使 用 3 个 GIF 并 
重复 地 循环 显示 它们 ， 如 图 4-10、 图 4-11 和 图 4-12 Pras. HTML 页 面 见 脚本 4-14。 


脚本 4-14 这 个 HIML 页 面 在 循环 的 广告 条 中 加 载 第 一 个 图 像 ， 其 他 工作 由 JavaScript 处 理 


<!DOCTYPE html» 
<html> 
<head> 
<title>Rotating Banner</title> 
«script src="script07.js"></script> 
<link rel="stylesheet" href="script01.css"> 
</head> 
<body> 
<div class="centered"> 
<img src="images/reading1.gif" id="adBanner" alt="Ad Banner"> 
</div> 
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«/body» 
</html> 
脚本 4-15 ”可 以 使 用 JavaScript 在 广告 条 中 循环 显示 图 像 


window.onload = rotate; 
var thisAd = 0; 


function rotate() { 
var adImages = new Array("images/ readingi.gif","images/reading2. gif", "images/reading3.gif"); 





thisAd++; 
if (thisAd == adImages.length) { 
thisAd = 0; 
} 
document. getElementById("adBanner").src = adImages[thisAd]; 


setTimeout(rotate, 3 * 1000); 














eoo Rotating Banner eoo Rotating Banner 
4 | » | @ http://www.javascriptworld.com/js | Qe « » 4 | > | © http://www.javascriptworld.com/js =! Q € » 


Tired of the Tube? Sy 

















图 4-10 循环 广告 条 显示 的 第 一 个 图 像 











^ 总 Dump Your Television 
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图 4-11 


循环 广告 条 显示 的 第 二 个 图 像 





eoo Rotating Banner 
| > | @ http://www javascriptworld.com/js E Q Goc » 


v 
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且 广 告 条 开始 循环 之 后 ,动画 会 一 直 运 行 ， 








Remember the Joy 


i) of Reading 





























图 4-12 ”最 后 一 个 图 像 . 加 载 页 面 


不 需要 用 户 的 干预 


> 创建 循环 广告 条 
l. var thisAd = 0; 
脚本 首先 创建 变量 thisAd， 它 在 这 段 代 码 中 被 设置 了 初始 值 。 
2. function rotate() { 
var adImages = new Array("images/reading1.gif","images/reading2.gif","images/reading3.gif"); 


先 建立 一 个 称 为 rotate() 的 新 函数 。 第 二 行 代码 创建 一 个 名 为 adImages 的 新 数组 , 它 包含 构成 循 
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环 广告 条 的 3 个 GIF 文件 的 文件 名 。 

3. thisAd++; 

这 一 行将 thisad 的 值 加 1. 

4. if (thisAd == adImages.length) { 

thisAd = 0; 
这 一 行 代 码 检查 thisAd 的 值 是 否 等 于 adImages 数组 中 成 员 的 数量 ， 如 果 等 于 ， 就 将 thisAd 的 值 
设置 为 0。 
5. document .getElementById("adBanner").src = adImages[thisAd]; 
页 面 上 循环 显示 的 图 像 的 id 是 adBanner。 在 脚本 4-14 中 可 以 看 到 ，img 标签 中 定义 了 这 个 id. 
这 行 代 码 指 出 ，adBanner 图 像 的 来 源 在 adImages 数组 中 ， 而 且 thisAd 变量 的 值 决定 浏览 器 当前 应 该 
使 用 3 个 GIF 中 的 哪 一 个 。 
6. setTimeout(rotate, 3 * 1000); 
这 一 行 告诉 脚本 每 隔 多 长 时 间 改 变 广 告 条 中 的 GIF。 可 以 使 用 内 置 的 JavaScript 命令 setTimeout 
指定 一 个 操作 应 该 间隔 多 长 时 间 执 行 一 次 〈 时 间 的 单位 是 毫秒 )。 在 这 个 示例 中 ,每 3000 毫秒 ( 即 3 
秒 ) 调用 一 次 rotate()PA ZR, PA ERP GIF 每 3 秒 改变 一 次 。 
V 提示 
O 你 可 能 会 问 ， 为 什么 要 用 JavaScript 实现 循环 广告 条 ,创建 一 个 动画 GIF 不 就 行 了 吗 ? 原因 之 
一 是 , 这 使 你 能 够 在 广告 条 中 使 用 JPEG 或 PNG, 因此 图 像 的 质量 更 好 。 通 过 使 用 这 些 高 质量 
的 图 像 ， 可 以 在 广告 条 中 显示 照片 。 

口 与 本 章 中 前 面 的 示例 不 同 , 这 里 的 图 像 并 不 预先 缓存 。 每 个 图 像 在 第 一 次 显示 时 从 服务 器 下 载 。 
这 是 因为 在 adImages 数组 中 可 能 有 任意 数量 的 图 像 ， 如 果 用 户 在 这 个 页 面 上 停留 的 时 间 很 短 ， 
只 会 看 到 其 中 的 两 三 个 图 像 ， 那 么 强迫 他 们 下 载 大量 图 像 C 比如 100 个 ) 是 不 妥当 的 。 


4.8 在 循环 广告 条 中 添加 链接 


广告 条 常常 用 来 做 广告 ， 而 且 常 常 希 望 在 广告 条 中 建立 链接 ， 证 访问 者 可 以 通过 单 击 链接 进入 与 
广告 相关 的 站 点 。 脚 本 4-16 显示 的 HTML 页 面 与 前 一 个 示例 相 比 只 有 一 点 不 同 : 它 在 img 标签 外 边 
添加 了 一 个 链接 。 脚 本 4-17 是 前 一 个 脚本 的 一 个 变 体 。 在 这 个 脚本 中 , 我 们 将 添加 一 个 新 数组 。 这 个 
新 数组 包含 当 用 户 单 击 广告 条 时 他 们 将 转 到 的 目的 地 。 在 这 个 示例 中 ，Eat at Joe’s 广告 条 会 把 用 户 带 


到 negrino.com, Drink more Java 链接 到 sun.com, Heartburn 链接 到 microsoft.com， 见 图 4-13。 
















































































































































































eoo Rotating Banner with Links eoo Rotating Banner with Links eoo Rotating Banner with Links 
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图 4-13 3x 3 个 图 像 都 是 链接 ， 单 击 它们 就 会 进入 三 个 Web 站 点 之 一 
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脚本 4-16 ”广告 条 所 需 的 HTML 


<!DOCTYPE html» 
<html> 
<head> 
<title>Rotating Banner with Links </title> 
<script src="script08.js"></script> 
<link rel="stylesheet" href="script01.css"> 
</head> 
<body> 
<div class="centered"> 


<a href-"linkPage.html"»«img src= "images/banneri.gif" id="adBanner" alt="ad banner"></a> 
</div> 
</body> 


</html> 


脚本 4-17 这 个 脚本 演示 如 何 将 循环 广告 条 转换 为 真正 可 单 击 的 广告 条 


window.onload = initBannerLink; 





var thisAd = 0; 


function initBannerLink() { 
if (document. getElementById("adBanner").parentNode.tagName == "A") { 
document ..getElementById("adBanner").parentNode.onclick = newLocation; 
} 


rotate(); 


function newLocation() { 
var adURL = new Array("negrino.com","sun.com","microsoft.com") ; 
document. location.href = "http://www." + adURL[thisAd]; 
return false; 


} 


function rotate() { 
var adImages = new Array("images/ banner1.gif","images/banner2.gif", "images/banner3.gif"); 


thisAd++; 

if (thisAd == adImages.length) { 
thisAd = 0; 

} 


document .getElementById("adBanner").src = adImages[thisAd]; 


setTimeout(rotate, 3 * 1000); 


> 在 循环 广告 条 中 添加 链接 
1. window.onload = initBannerLink; 
ALD SERIE, AEE initBannerLink() KA. 


2. if (document.getElementById("adBanner").parentNode.tagName -- "A") ( 
document.getElementById ("adBanner").parentNode.onclick = newLocation; 








) 
rotate(); 
这 段 代码 在 initBannerLink()PAZKrPh, 它 首先 检查 adBanner 对 象 是 否 包围 在 链接 标签 中 。 如 果 是 
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这 样 ， 那 么 当 单 击 链接 时 ， 将 调用 newLocation()PRZk. Hm, 34 


3. function newLocation() { 


var adURL = new Array("negrino.com","sun.com", 
TET PREX newLocation()'f, adURL 变量 被 设置 为 一 个 包含 3 个 成 员 的 新 数组 。 这 











因为 下 面 将 组 合 出 完整 的 URL。 




















] rotate() 国 数 。 


microsoft.com"); 


里 只 存储 域名 ， 





4. document.location.href = "http://www." + adURL[thisAd]; 


return false; 





这 段 代码 在 新 函数 newLocation "P, Jf document.location.href 对 象 ( 换 句 话 说 ， 就 是 当前 文档 





窗口 ) 设置 为 文本 字符 串 http://www.( 注意 点 号 ) 加 上 adURL 的 值 。 
要 指定 数组 的 一 个 成 员 。 成员 的 编号 存储 在 thisAd 中 , 产生 的 字符 串 可 以 是 三 个 链接 之 一 ( 取决 于 用 





户 何 时 进行 单 击 ) 最 后 ， 它 返回 false， 告 诉 浏览 








因为 adURL 是 一 个 数组 ， 所 以 需 

















不 应 再 加 载 这 个 href。 如 果 不 这 样 做 , W EAE 


会 加 载 这 个 URL 两 次 。 我 们 已 经 在 JavaScript 中 处 理 了 所 有 工作 ， 所 以 不 需要 再 加 载 href。 


v 提示 


口 adURL 数组 中 的 成 员 数量 必须 与 adImages 数组 相同 ， 这 样 这 个 脚本 才能 正确 地 工作 。 





4.9 建立 循环 式 幻灯 片 









































Web 站 点 上 的 幻灯 片 每 次 向 用 户 显 示 一 个 图 像 ， 并 且 让 用 户 能 够 控制 显示 图 像 的 进度 ( 既 可 以 向 
前 ,也 可 以 向 后 )。JavaScript 向 用 户 提供 所 需 的 交互 式 控制 能 力 。 脚 本 4-18 显示 了 必需 的 HTML, 脚 














本 4-19 是 在 页 面 上 添加 幻灯 片 所 需 的 JavaScript. 
脚本 4-18 这 个 HTML 页 面 创建 幻灯 片 


<!DOCTYPE html» 
<html> 
<head> 

<title>Image Slideshow</title> 

«script src-"script09.js"»«/script» 

<link rel="stylesheet" href="script01.css"> 
</head> 
<body> 

<div class="centered"> 

«hi»Welcome, Robot Overlords!</h1> 











«img src-"images/roboti.jpg" id-"myPicture" width="200" height="400" alt="Slideshow"> 
<h2><a href-"previous.html" id="prevLink">&lt;&lt; Previous </a>&nbsp;&nbsp;<a href="next. html" 


—id-"nextLink"»Next &gt; &gt;</a></h2> 
</div> 
</body> 
</html> 


脚本 4-19 


window.onload = initLinks; 


这 个 脚本 构建 一 个 幻灯 片 ， 用 户 可 以 通过 单 击 链接 控制 图 像 的 前 后 切换 


var myPix = new Array("images/robot1. jpg", "images/robot2.jpg","images/robot3. jpg"); 


var thisPic = 0; 


function initLinks() { 


document. getElementById("prevLink").onclick = processPrevious; 
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document.getElementById("nextLink").onclick = processNext; 


} 


function processPrevious() { 
if (thisPic == 0) { 
thisPic = myPix. length; 
} 
thisPic--; 
document .getElementById("myPicture").src = myPix[thisPic]; 
return false; 





} 
function processNext() { 
thisPic++; 
if (thisPic == myPix.length) { 
thisPic = 0; 
} 
document. getElementById("myPicture").src = myPix[thisPic]; 
return false; 
} 

















这 个 脚本 构建 的 幻灯 片 是 循环 式 的 ( wrap around )， 也 就 是 说 ， 如 果 超 过 了 图 像 列表 的 末尾 ， 就 
会 返回 到 开头 ， 反 之 亦 然 。 图 4-14 显示 这 个 幻灯 片 的 效果 。 
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i @ Internet | Protected Mode: On Rios ~ [ @ Internet| Protected Mode: On 10% ~ i @ Internet| Protected Mode: On aow > | 


K] 4-14 单 击 Previous 或 Next 链接 ， 就 会 分 别 调用 processPrevious() 或 processNext () 函数 


> 建立 循环 式 幻 灯 片 


1. window.onload = initLinks; 
当 窗 口 完成 加 载 时 ， 触 发 initLinks() 函 数 。 
2. function initLinks() { 


document.getElementById ("prevLink").onclick 
document.getElementById ("nextLink").onclick 























processPrevious; 
processNext; 


这 个 函数 为 Previous 或 Next 链接 设置 onclick 事件 处 理 程 序 。 
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3. function processPrevious() { 
if (thisPic == 0) { 
thisPic = myPix. length; 

这 个 函数 使 幻灯 片 向 前 切换 图 像 。 它 首先 检查 thisPic 是 否 等 于 0。 如 果 是 , 这 个 函数 就 获取 myPix 
数组 中 的 图 像 数量 。 

4. thisPic--; 

document.getElementById("myPicture").src = myPix[thisPic]; 

第 一 行将 thisPic 的 值 减 1。 下 一 行将 myPicture 的 src 属性 设置 为 myPix 数组 中 与 thisPic 的 当 
前 值 对 应 的 元 素 。 

5. thisPic++; 


if (thisPic == myPix.length) { 
thisPic = 0; 














m ("myPicture").src = myPix[thisPic]; 
这 段 代码 在 processNext() 函 数 中 ， 它 使 幻灯 片 向 后 切换 图 像 ， 其 工作 方式 与 processPrevious() 
函数 非常 相似 - 它 首先 将 thispic 的 值 加 1, 然 后 检查 thispic 的 值 是 否 等 于 mypix 数组 中 成 员 的 数量 。 
如 果 是 ， 就 将 thisPic 设置 为 0。 下 一 行 设置 myPicture 的 src 属性 。 


4.10 显示 随机 图 像 


如 果 你 的 站 点 包含 大 量 图 形 , 或 者 要 显示 数字 化 艺术 作品 ， 那 么 可 能 希望 在 用 户 进 入 站 点 时 从 图 
像 集合 中 随机 选择 要 显示 的 图 像 。 同 样 ，JavaScript 可 以 实现 这 种 功能 ! 相当 简单 的 脚本 4-20 是 所 需 
HJ HTML, 脚本 4-21 是 JavaScript. [El 4-15 显示 脚本 的 结果 ， 在 这 个 示例 中 图 像 是 三 种 毛 绒 玩具 (分 
mhe, MRE )。 


脚本 4-20 ”这 个 简单 的 HTML 创建 显示 随机 图 像 的 页 面 


<!DOCTYPE html» 
<html> 
<head> 
<title>Random Image</title> 
<script src="script10.js"></script> 
<link rel="stylesheet" href="script01.css"> 
</head> 
<body> 
<img src-"images/spacer.gif" width="305" height="312" id-"myPicture" alt="some image"> 
</body> 
</html> 


脚本 4-21 可 以 用 这 个 脚本 在 页 面 上 显示 随机 图 像 , 它 使 用 JavaScript 的 Math. random 方法 生成 一 个 随机 数 


window.onload = choosePic; 















































function choosePic() { 
var myPix = new Array("images/lion. jpg", "images/tiger. jpg", "images/bear. jpg"); 
var randomNum = Math.floor ((Math.random() * myPix.length)); 
document. getElementById("myPicture").src = myPix[randomNum] ; 
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(8) Random Image - Mozilla Firefox 


? 
(8) Random Image - Mozilla Firefox 
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(8) Random Image - Mozilla Firefox 
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Done Done Done 


4-15 根据 脚本 生成 的 随机 数 的 值 ， 用 户 会 看 到 三 种 毛 绒 玩 具 之 一 


> 显示 随机 图 像 


1. var myPix = new Array("images/lion.jpg", "images/tiger.jpg", "images/bear. jpg"); 

与 前 面 一 样 ， 建 立 一 个 包含 三 个 图 像 的 数组 ， 并 且 将 它 赋 值 给 变量 myPix。 

2. randomNum = Math.floor((Math.random() * myPix.length)); 

变量 randomNum 被 设置 为 一 个 数学 表达 式 的 值 。 这 个 表达 式 最 好 是 从 内 向 外 读 。Math.random 生成 
一 个 0~ 1 的 随机 数 ， 然 后 将 这 个 数字 乘 以 mypPix.length， 即 数组 中 的 成 员 数 量 (在 这 个 示例 中 是 3 )。 
Math. floor 将 结果 向 下 取 整 ， 这 意味 着 最 终 产 生 0、1 和 2 中 的 一 个 数字 。 

3. document. getElementById("myPicture").src = myPix[randomNum]; 

这 行 代码 根据 myPix 数组 设置 myPicture 图 像 的 来 源 ， 当 前 采用 的 值 由 randomNun 的 值 决定 。 


4.11 随机 开始 循环 显示 图 像 


如 果 有 许多 图 像 需 要 显示 , 你 可 能 不 希望 在 每 次 加 载 页 面 时 都 从 同样 的 图 像 开 始 显示 。 脚 本 4-22 
是 HIML， 脚 本 4-23 是 JavaScript， 它 组 合 了 前 面 用 于 循环 广告 条 的 代码 和 随机 图 像 的 代码 。 


脚本 4-22 HTML 文件 中 有 一 个 分 隔 线 GIF， 这 是 广告 条 出 现 之 前 的 占 位 图 像 


<!DOCTYPE html» 
<html> 
<head> 
<title>Rotating Random Banner</title> 
<script src-"scripti11.js"»«/script» 
<link rel="stylesheet" href="script01.css"> 
</head> 
<body> 
<div class="centered"> 
<img src-"images/spacer.gif" id-"adBanner" alt="Ad Banner"> 
</div> 
</body> 
</html> 
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脚本 4-23 这 个 脚本 可 以 从 一 个 随机 图 像 开始 循环 显示 图 像 
window.onload = choosePic; 


var adImages = new Array("images/reading1.gif", "images/reading2.gif", "images/reading3.gif"); 
var thisAd = 0; 


function choosePic() { 
thisAd = Math.floor((Math.random() * adImages.length)); 
document .getElementById("adBanner").src = adImages[thisAd]; 


rotate(); 


function rotate() { 
thisAd++; 
if (thisAd == adImages.length) { 
thisAd = 0; 
} 
document .getElementById("adBanner").src = adImages[thisAd]; 


setTimeout(rotate, 3 * 1000); 


} 


> 随机 开始 循环 显示 图 像 








l.var adImages = new Array("images/reading1.gif","images/reading2.gif","images/reading3.gif"); 
与 前 面 的 示例 一 样 ， 建 立 一 个 含有 三 个 图 像 的 数组 并 且 将 数组 赋值 给 一 个 变量 。 

2. function choosePic() { 

这 个 函数 与 脚本 4-21 中 的 choosePic() 函 数 相同 ， 其 工作 方式 的 细节 请 参见 4.10 节 中 的 解释 。 
3. function rotate() { 

这 个 函数 与 脚本 4-15 中 的 rotate() 函 数 相同 ， 其 工作 方式 的 细节 请 参见 4.7 节 中 的 解释 。 
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Web 浏览 嚣 中， 窗口 是 最 重要 的 接口 元 素 。 不 出 所 料 ，JavaScript 提供 了 很 多 用 来 操纵 窗 
的 工具 。 
JavaScript 操纵 窗口 的 方式 同 操纵 框架 类 似 。 这 非常 合理 ， 因 为 框架 仅仅 是 整个 浏览 器 窗口 中 的 
另 一 种 文档 窗口 。 
然而 在 过 去 的 几 年 中 , 框架 不 再 流行 ,甚至 从 HTMLS 中 完全 移 除 (iframe 除外 )。 因 此 ， 本 章 的 
框架 部 分 会 将 重点 集中 在 如 何 通 过 JavaScript 1E iframe 变 得 更 有 用 。 
目前 需要 了 解 的 HTML 知识 见 表 5-1。 
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zx 5-1 目前 需要 了 解 的 HTML 知识 一 一 框架 
标 = 属 性 意 义 
iframe 内 部 框架 ， 它 显示 在 进行 调用 的 HTML 页 面 中 
id JavaScript 使 用 这 个 属性 引用 iframe 
name JavaScript 也 可 以 使 用 这 个 属性 引用 iframe 





src iframe 页 面 的 URL 











5.1 防止 页 面 显示 在 框架 中 


别人 可 以 将 你 的 页 面 加 载 进 他 们 站 点 上 的 框架 中 ， aoa as = 
使 你 的 页 面 看 起 来 就 像 是 他 们 提供 的 内 容 。 在 JavaScript G ae clea 
中 ， 窗 口 形 成 一 个 层次 结构 ， 父 窗口 处 于 这 个 层次 结构 |Here'sa |A really important page 
的 顶层 。 当 别人 “拦截 ”你 的 页 面 时 ， 他 们 会 迫使 它 成 really cool | here that everyone wants 
为 父 窗口 的 子 框架 -图 5-1 显示 当 页 面 作为 别人 请 点 的 一 | Pt [to aim as The. 
部 分 显示 时 的 效果 。 可 以 使 用 脚本 防止 页 面 被 拦截 ， 并 | pretend I 
且 迫 使 页 面 总 是 单独 显示 在 浏览 器 窗口 中 。 这 需要 两 个 |wrote 


































































































脚本 。 脚 本 5-1 总 是 应 该 单独 显示 的 HTML 页 面 , 其 中 [un — 
包含 调用 JavaScript 的 <script> 标 签 ; 脚本 5-2 是 我 们 将 图 5-1 显示 在 别人 框架 中 的 页 面 


在 下 一 步 描述 的 JavaScript 文档 。 
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脚本 5-1. 这 是 别人 可 能 想 拦截 的 HTML 页 面 
<!DOCTYPE html» 
<html> 
<head> 
<title>Can't be in a frame</title> 
«script src="script01.js"></script> 
</head> 
<body> 
«hi»A really important page here that everyone wants to claim as theirs.</h1> 
</body> 
</html> 


脚本 5-2 JavaScript 可 以 迫使 页 面 总 





是 单独 显示 


if (top.location != self.location) { 
top.location.replace(self. location) ; 


} 
> 使 页 面 单独 显示 








1.if (top.location != self.loc 
首先 ， 检 查 当 前 页 面 
























































(self) 的 位 置 是 否 处 于 浏览 





ation) { 


Can't be in a frame E 





ymo Cf Wanner) 











s * Images * Information = Miscellaneous * Outline "| 
























































器 窗口 层次 结构 的 最 顶层 。 如 果 是 这 样 ， 就 不 需要 做 任 |A really important page here that 
何 处 理 。 everyone wants to claim as theirs. 

2. top. location. replace(self. location) ; 

AUR 2A B TAS TE DU. , DAS TUES UU TREES 4 B 92 Td 
的 位 置 。 这 迫使 当前 窗口 显示 我 们 的 页 面 , 而 且 只 显示 我 们 - 

BEAR x Done & 4 5 

的 页 面 。 图 5-2 显示 这 种 效果 。 

v 提示 图 5-2 ”防止 恶意 拦截 框架 集 之 后 的 页 面 


口 可 以 直接 将 top.location iz 
Marky) back 按钮 。 如 果 


JA AN 
前 页 面 。 使 
































前 一 个 页 面 。 
5.2 设置 目标 


所 谓 的 iframe 是 一 种 内 联 框 架 。 也 





必须 置 于 框架 集 之 内 。 与 一 般 的 
脚本 的 目标 ， 这 样 便 可 以 在 脚本 的 控 和 








他 们 尝试 通过 单 
用 replace() 方 法 会 替换 浏览 器 历史 中 的 当前 页 面 ， 这 使 back 按钮 能 够 显示 


ea 














B self.location, 但 这 有 一 个 副 作 
Fh back 按钮 返 





H: 用 户 无 法 再 使 用 浏 
回 前 一 个 页 面 ， 就 会 自动 跳 回 当 





















































i 中 的 框架 ， 并 非 
iframe 也 是 一 份 独立 的 HTML 文 档 。 可 以 将 iframe 作 为 一 段 

















就 是 说 ， 它 是 一 种 可 以 租 入 到 常规 HTML 页 痢 
































在 接 下 来 的 示例 中 ， 我 们 会 看 到 一 





出 下 ， 实 时 创建 内 容 并 脱离 框架 集 将 其 显示 在 页 面 中 。 
份 常规 的 HTML 页 面 ， 其 中 包含 一 小 块 区 域 ， 即 iframe。 在 主 


s AN 




















内 容 区 域 的 链接 可 以 通过 目标 区 域 作 用 于 ifame。 要 使 用 HTML 加 载 过 ame， 可 以 用 <a> 标 签 的 target 








TRI 


target 只 能 通过 JavaScript。 这 是 


Es。 不 过 很 多 网 站 使 用 的 仍然 是 XH 





能 更 新 iframe。 





因为 XHTML Strict 不 支持 target 特 愧 








TML, WRA 





F 发 人 员 要 在 XHTML Strict 下 使 用 iframe 的 话 , 设置 
E， 开 发 人 员 必 须 自行 设置 目标 才 
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脚本 5-3 的 代码 可 以 实现 只 需 点 一 下 链接 即 可 将 所 选 页 面 载 人 ifiame。 对 应 的 CSS 是 脚本 5-4; BLA 
iframe 的 初始 页 面 是 脚本 5-5; 请 求 设置 目标 的 JavaScript 是 脚本 5-6。 还 有 另外 三 个 没有 显示 的 简单 
HTML 页 面 ， 也 可 以 加 载 到 iframe 中 。 结 果 如 图 5-3 所 示 。 













































































@ iframes 1 - Internet Explorer provided by Dell leks 
GO = [& weropooecom las vera/ets /scrpm2 m. ~| 4| x | [88 coogi p- 
File Edit View Favorites Tools Help 
|% Favorites 53 |" |fB Chapters | @ iframes = 
Main Content Area 
Link 1 
Link, 2 
Link F 
You are now looking at 
Example 2 
nttp://dl.dropbox.com/u @ Internet | Protected Mode: On £4 Ox ~ 























图 5-3 在 主 窗口 中 单 击 链接 ， 触 发 iframe 更 新 
脚本 5-3 ”此 页 面 创建 iframe 并 调用 外 部 JavaScript 


<!DOCTYPE html» 
<html> 
<head> 
<title>iframes 1</title> 
<script src="script02.js"></script> 


<link rel="stylesheet" href="script01.css"> 
</head> 


<body> 
<iframe src-"iframeO1.html" name="icontent" id="icontent"></iframe> 
<h1>Main Content Area</h1> 
<h2> 
<a href-"page1.html"»Link 1</a><br> 
<a href-"page2.html"»Link 2</a><br> 
<a href-"page3.html"»Link 3</a> 





</h2> 
</body> 
</html> 
脚本 5-4 利用 CSS 样式 化 主页 面 并 为 iframe 设 定位 置 
body { 


background-color: #FFF; 
} 


iframe#ticontent { 
float: right; 
border: 1px solid black; 
width: 350px; 
height: 300px; 
margin-top: 100px; 
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脚本 5-5 显示 在 iframe 中 的 初始 页 面 


<!DOCTYPE html» 
<html> 
<head> 
<title>Content frame</title> 
</head> 
<body> 
Please load a page 
</body> 
</html> 


脚本 5-6 为 什么 需要 用 JavaScript 来 设置 框架 作为 目标 呢 ? 有 很 多 原因 


window.onload = initLinks; 





function initLinks() { 
for (var i=0; i«document.links.length; i++) { 
document. links[i].target = "icontent"; 


} 
} 


> 设置 框架 目标 

1. window.onload = initLinks; 

在 加 载 页 面 时 ， 调 用 initLinks() PAA. 

2. for (var i=0; i«document.links.length; i++) { 
document.links[i].target = "icontent"; 


} 
initLinks() 函 数 循环 遍历 页 面 上 的 所 有 链接 。 当 发 现 链接 时 , 它 将 target 

"icontent"。 这 就 是 所 需 的 所 有 代码 。 

V 提示 

口 如 果 访 问 者 关闭 了 JavaScript 功能 ， 那 么 单 击 第 一 个 链接 时 ， 页 面 会 加 载 进 主 窗口 ， 而 不 是 

icontent iframe。 很 遗憾 ， 但 这 就 是 框架 的 工作 方式 。 

O 曾经 有 很 多 支持 使 用 XHTML 的 理由 , 现在 越 来 越 少 了 , 但 通过 编程 方式 设置 目标 仍旧 是 比较 
方便 的 。 通常 ,编写 主 内 容 区 域 的 开发 人 员 不 清楚 iframe 开发 人 员 想 要 什么 , 反之 亦 然 。 在 硬 
编码 方式 下 , 需要 将 target 写 到 无 数 的 ca> 标 签 中 ,充斥 整个 网 站 。 相 比 之 下 , 将 target SA 
一 行 JavaScript 代码 中 显然 更 灵活 。 











zal 


性 设置 为 字符 串 




































































5.3 用 JavaScript 加 载 iframe 


当然 ,不仅 使 用 JavaScript 设置 目标 ， 你 可 能 希望 做 更 多 事情 ， 比 如 加 载 其 他 HTML 页 面 。 本 节 
讲解 应 该 怎么 做 。 同 样 ， 我 们 有 一 个 建立 iframe 的 主页 面 ， 这 个 页 面 实质 上 与 脚本 5-13 相同 。 还 有 
一 个 提供 iframe 初始 内 容 的 页 面 ， 它 与 脚本 5-5 相似 。 所 需 的 JavaScript 如 脚本 5-7 所 示 。 
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脚本 5-7 这 个 脚本 把 HTML 页 面 加 载 进 icontent iframe 


window.onload = initLinks; 


function initLinks() { 
for (var i=0; i<document.links.length; i++) { 
document. links[i].onclick = setContent; 


} 


function setContent() { 
document .getElementById("icontent").contentWindow. document. location. href = this.href; 
return false; 


} 
=> FA JavaScript Jinà iframe 


1. foro (var i=0; i«document.links.length; i++) { 
document. links[i].onclick =setContent; 








在 脚本 5-6 的 作用 下 ，initLinksys() 函 数 会 在 页 面 加 载 时 被 调用 。 这 样 一 来 ， 我 们 对 页 面 中 所 有 
的 链接 都 进行 了 设置 ， 当 其 被 单 击 时 ， 就 会 调用 setContent() 函 数 。 


2. function setContent() { 
document.getElementById ("icontent").contentWindow. document.location.href - this.href; 


在 这 个 示例 中 ， 单 击 链接 就 会 触发 setContent() 函 数 ， 这 个 函数 将 新 页 面 加 载 进 iframe, RIL 
图 5-4, 























{Æ iframes 2 - Internet Explorer provided by Dell [Emm 
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图 5-4” 当 单 击 主 窗口 中 的 链接 时 ，icontent iframe 中 会 加 载 新 页 面 

















3. return false 
最 后 ，setContent() 返 回 false, 意味 着 告知 浏览 右 不 要 将 href 一 并 载 人 主 窗 口 。 和 否则 两 者 都 会 
被 载 人 。 这 是 因为 所 有 的 功能 都 通过 JavaScript 实现 了 ， 所 以 无 需 载 人 href。 


5.4 Iframe 的 使 用 
由 于 JavaScript 可 以 实时 创建 页 面 内 容 ， 因 此 在 基于 用 户 的 选择 来 加 载 iframe 页 面 方面 是 非常 有 用 
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的 。 脚 本 5-8 是 一 个 常规 的 HTML 页面 ， 其 中 加 载 了 之 前 常用 的 虚拟 过 ame 页 面 。 脚 本 5-9 详 见 下 文 ， 创 
建 了 一 个 页 面 并 加 载 到 了 名 为 icontent 的 iframe 中 。 运 行 结 果 如 图 5-5 所 示 。 


dcos ë 















































Ele Ed Mew History Bookmarks Tools Help 
ac A http://dl.dropbox.com/u/2127486/jsvqs8/ch0 v. ~| [$8 Pp: 
Chapter S iframes 3 x [4 
Main Content Area 
Link 
Link 
Link 3 d 
= You are now looking at 
Example 1. 
X Find | sear $ Net dt Previous © Highlightall F] Match case 
http://dl.dropbox.com/u/2127486 /jsvqs8/ch0S5/script04 html eo 
ES 4 DEBA: 
图 5-5 这 是 脚本 5-9 的 运行 结果 ， 用 JavaScript 写 的 iframe 





脚本 5-8 ”这 个 页 面 中 有 一 个 位 于 右 侧 的 这 ame， 还 包括 一 些 链接 说 明 


<!DOCTYPE html> 
<html> 
<head> 
<title>iframes 3</title> 
«script src="script04.js"></script> 
<link rel="stylesheet" href="script01.css"> 
</head> 
<body> 
<iframe src-"iframeO1.html" name-"icontent" id="icontent"></iframe> 
<hi>Main Content Area</h1> 
<h2> 
<a href="#">Link 1</a><br> 
<a href="#">Link 2</a><br> 
<a href="#">Link 3</a> 
</h2> 
</body> 
</html> 


脚本 5-9 将 内 容 添加 至 名 为 icontent 的 iframe 中 的 脚本 


window.onload = initLinks; 


function initLinks() { 
for (var i=0; i«document.links.length; i++) { 
document. links[i].onclick = writeContent; 
document. links[i].thisPage = i41; 
} 
} 


function writeContent() { 
var newText = "«hi»You are now looking at Example " + this.thisPage + ".<\/h1>"; 


document . getElementById("icontent").contentWindow.document.body.innerHTML = newText; 
return false; 
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> anal A iframe 创建 内 容 








1. for (var i=0; i«document.links.length; i++) { 


document. links[i].onclick = writeContent; 
document. links[i].thisPage = i+1; 


initLinks() 函 数 首先 循环 遍历 页 面 上 所 有 的 链接 。 然 后 对 于 每 个 链接 设置 了 两 个 元 素 : onclick 
处 理 函 数 和 thispPage 属 性 。 后 者 存 有 单 击 链接 后 会 显示 的 页 码 ， 例 如 链接 0 就 是 “page 1”, 链接 1 就 是 
“page 2”， 以 此 类 推 。 循 环 中 的 onclick 处 理 函 数 可 以 让 每 个 链接 在 单 击 后 调用 writeContent() 郴 数 。 


2. Var newText = "<h1>You are now looking at Example " + this.thisPage + ".<\/h1>"; 
document.getElementById ("icontent").contentWindow. document.body.innerHTML = newText; 


这 是 writeContent() 函 数 的 内 容 。 首 先 声明 并 设置 一 个 变量 newText ， 存 人 一 些 字 串 。 然 后 找到 页 
面 中 的 icontent 元 素 , 接着 将 其 contentWindow.document.body.innerHTML 改 为 newText。 为 进一步 解释 ， 
我 们 找到 一 个 指定 id ( 此 处 为 icontent ) 对 应 的 元 素 ， 然 后 获取 其 contentWindow。 随 后 获取 它 所 包含 
的 document ， 接 着 获取 document 元 素 的 body， 最 后 重 置 innerHTML， 也 就 是 在 body 标 签 中 所 含 的 HTML。 
V 提示 
口 为 什么 第 2 步 中 斜 杜 (“/”) 前 面 会 有 反 和 斜 本 〈 人”) ? 根据 标准 ,浏览 器 可 能 会 把 结束 标签 的 
起 始 字 符 (“</”) 解析 为 一 行 的 结束 。 反 和 斜 杠 的 作用 就 是 跳 过 斜 杠 ， 让 我 们 在 编写 HTML 的 
时 候 不 会 报错 。 




































































5.5 创建 动态 iframe 


基于 上 面 的 示例 ， 我 们 可 以 使 用 JavaScript 为 过 ame 创 建 动态 内 容 。 创 建 的 内 容 如 脚本 5-10 所 示 。 
当 用 户 单 击 任意 一 个 链接 时 ，JavaScript 向 iframe 写 入 新 的 代码 。 在 这 个 示例 中 ， 显 示 的 是 页 面 的 名 称 
以 及 当前 session 中 用 户 访 问 页 面 的 次 数 。 
脚本 5-10 ”这 上 段 脚 本 会 计算 iframe 的 内 容 ， 并 将 其 写 入 窗口 


var pageCount = new Array(0,0,0,0); 























window.onload = initLinks; 


function initLinks() { 
for (var i=0; i<document.links.length; i++) { 
document. links[i].onclick = writeContent; 
document. links[i].thisPage = i+1; 
} 
} 


function writeContent() { 
pageCount[this.thisPage]++; 


var newText = "<h1>You are now looking at Example 
newText += ".<br>You have been to this page "; 
newText += pageCount[this.thisPage] + " times.<\/h1>"; 


+ this.thisPage; 


document .getElementById("icontent").contentWindow.document.body.innerHTML = newText; 
return false; 
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=> 加 载 动态 iframe 











1. var pageCount = new Array(0,0,0,0); 

为 了 显示 加 载 页 面 的 次 数 ， 我 们 需要 一 种 记录 该 信息 的 方法 。 在 这 里 我 们 将 会 使 用 pageCount。 
2. pageCount[this.thisPage]++; 

这 行 代码 自 增 pageCount 数组 ， 这 样 我 们 就 可 以 跟踪 到 访问 特定 页 面 的 次 数 了 。 











3. var newText = "«hi»You are now looking at Example 


newText 4- ".«br»You have been to this page "; 
newText += pageCount[this.thisPage] + " times.<\/h1>"; 


这 些 行 实时 创建 iframe 的 内 容 。 
4. document. getElementById("icontent").contentWindow.document.body.innerHTML = newText; 


+ this.thisPage; 





return false; 
跟 先 前 的 示例 一 样 ， 我 们 获取 icontent 元 素 ， 重 置 其 body 的 innerHTML 属性 。 用 两 行文 字 替 换 
innerHTML， 结 果 如 图 5-6 所 示 。 由 于 所 有 工作 都 已 完成 ， 因 此 最 后 以 return false 结尾 ， 确 保 浏 览 
不 会 执行 其 他 误 操 作 。 


























f) iframes 4 - Mozilla Firefox 
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5-6 每 次 单 击 主 窗 口中 的 链接 ，iftiame 的 内 容 就 会 更 新 


5. 6 在 文档 之 间 共 享 函 数 


只 要 主 窗口 和 iframe 都 来 自 同样 的 域 , 那么 它们 共享 单个 外 部 JavaScript 文 件 是 非常 方便 的 。 这 里 ， 
我 们 将 通过 iframe 加 载 外 部 JavaScript 文 件 来 演示 它 如 何 被 主 窗口 调用 ， 如 图 5-7 所 示 。 脚 本 5-11 是 主 
HTML 页 面 。 脚 本 5-12 是 载 入 到 iframe 中 的 页 面 。 脚 本 5-13 是 我 们 的 JavaScript 文 件 。 


脚本 5-11 页 面包 含 一 个 image 标签 ， 但 不 显示 任何 内 容 


<!DOCTYPE html» 
<html> 
<head> 
<title>iframes 5</title> 
<link rel="stylesheet"href="script01.css"> 
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</head> 
<body> 
Today's Featured site: 
<img src="images/spacer.gif" width="400" height="75" id="adBanner" alt="banner"> 
<iframe src-"iframeO2.html" name="icontent" id="icontent"></iframe> 
«hi»Main Content Area</h1> 
<h2> 
<a href="#">Link 1</a><br> 
<a href="#">Link 2</a><br> 
<a href="#">Link 3</a> 




















</h2> 
</body> 
</html> 
© iframes 5 [er 
DEUEUEUUEUUESTUEUUES 
[4 + | nisp//dldropbox.com/u/212786/jsveet/chüS/seip © | (Q7 Goosle Ded 
Chapters UE f * 
Java/cript and Ajax 
Today's Featured site for the Web 
Main Content Area 
Link 1 
Link 2 Please load a page 
Link 3 














图 5-7 通过 调用 iframe 中 的 代码 ， 更 新 主页 面 上 的 图 片 


> 在 另 一 个 文档 中 使 用 函数 
1. var bannerArray = new Array("images/redBanner.gif", "images/greenBanner.gif", 
—"images/blueBanner.gif"); 


首先 创建 一 个 新 数组 ， 其 中 包含 所 有 可 能 显示 的 广告 条 图 像 的 文件 名 ,并 将 这 个 数组 赋值 给 


bannerArray 变量 。 



































2.window.onload = initLinks; 
“4 iframe 加 载 时 ， 调 用 initLinks(). 


3. for (var i=0; i«parent.document.links.length; i++) { 
parent.document.links[i].onclick = setBanner; 


现在 开始 initLink() 函 数 中 的 代码 。 因 为 要 从 iframe 的 上 下 文中 调用 这 个 函数 ， 所 以 设置 主 窗口 
中 链接 的 方式 与 前 面 的 示例 有 点 儿 差异 。 这 一 次 ,我们 重新 设置 每 个 链接 的 parent 文档 的 onclick 处 
理 程序 。 

4. setBanner(); 

作为 最 后 的 初始 化 步骤 ， 调 用 setBanner() KX 

5. var randomNum = Math.floor(Math.random() * bannerArray. length) ; 

Set Banner() 函 数 首先 计算 一 个 随机 数 。 这 一 行 调用 Math.random() 函 数 , 将 结果 乘 以 bannerArray 
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数组 中 的 成 员 数 量 , 最 后 对 结果 向 下 取 整 ， 从 而 得 到 一 个 0 到 数组 成 员 数 量 减 1 之 间 的 随机 整数 。 然 
后 ,将 结果 放 进 randomNum 变量 。 





6. parent.document.getElementById("adBanner").src = bannerArray[randomNum] ; 

主 窗 口 仅 通过 其 id 就 可 以 指向 一 个 这 ame 一 一 它 的 子 文档 。 但 在 iframe 指向 主 窗 口 之 前 , 它 需要 
显 式 地 指向 其 parent。 这 里 , 我 们 获取 该 元 素 (一 个 window )、 其 中 的 document ， 以 及 adBanner 元 素 。 
然后 ， 将 adBanner 的 src 属性 设置 为 数组 的 当前 元 素 ， 也 就 是 新 的 图 片 名 称 ， 将 来 会 显示 在 页 面 上 。 
最 后 ， 主 窗口 中 的 广告 条 会 被 设置 为 随机 从 该 数组 中 选取 。 


脚本 5-12 ”此 页 面 只 加 载 指向 其 parent 的 外 部 JavaScript 文件 


<!DOCTYPE html» 
<html> 
<head> 
<title>Content iframe</title> 
«script src="script06.js"></script> 
</head> 
<body> 
Please load a page 
</body> 
</html> 


脚本 5-13 ”这 段 脚 本 会 更 新 父 页 面 


var bannerArray = new Array("images/redBanner.gif", "images/greenBanner.gif", "images/blueBanner.gif"); 










































































window. onload = initLinks; 


function initLinks() { 
for (var i=0; i«parent.document.links.length; i++) { 
parent.document.links[i].onclick = setBanner; 


setBanner(); 


function setBanner() { 
var randomNum = Math. floor(Math.random() * bannerArray. length) ; 


parent.document.getElementById("adBanner").src = bannerArray[randomNum]; 
return false; 


} 
5.7 打开 新 窗口 


开发 人 员 可 能 希望 在 不 干扰 用 户 正 在 访问 的 页 面 的 前 提 下 , 通过 打开 一 个 新 窗口 来 为 用 户 显示 
些 附 加 的 信息 。 例 如 ， 我 们 可 能 希望 为 一 篇 技术 论文 或 新 闻 报 道 打 开 注 释 和 评论 。 虽 然 使 用 HTML 
可 以 打开 新 浏览 偶 窗 口 ， 不 过 使 用 JavaScript 的 话 ， 对 新 窗口 的 内 容 和 功能 可 以 有 更 高 的 可 控 性 。 
图 5-8 显示 的 是 一 个 标准 的 浏览 器 和 窗口， 其 中 所 有 的 部 分 都 已 标明 。 我 们 创建 的 窗口 可 以 包括 其 
中 的 任意 部 分 或 者 全 部 。 脚本 5-14 是 HTML。 脚本 5-15 显示 的 JavaScript 文件 在 图 5-9 所 示 的 页 面 中 
创建 了 一 个 窗口 ， 单 击 链接 会 触发 创建 新 窗口 (在 本 例 中 ， 此 窗口 会 显示 一 幅 猫 的 图 片 )。 
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脚本 5-14 JE HTML 页 面 调用 可 以 打开 新 窗口 的 外 部 JavaScript 文件 


<!DOCTYPE html» 
<html> 
<head> 
<title>Opening a Window</title> 
<script src="script07.js"></script> 
</head> 
<body> 
«hi»The Master of the House</h1> 
«h2»Click on His name to behold He Who Must Be Adored«/h2» 
<h2><a href="#" class="newWin">Pixel </a></h2> 
</body> 


</html> 地 址 栏 



















































— — — SOES] C(I Windows 
T HARE Pc A http://dl.dropbox.com/u/. Vy -| |$- Googie P| (E) 或 Unix 操作 系统 ) 
A standard (if a bit dull) window 滚动 条 
状态 栏 Bone gi 快速 缩放 
图 5-8 浏览 器 窗口 的 各 种 元 素 。 图 中 的 名 称 对 应 open() 命 令 中 可 以 使 用 的 参数 














你 们 可 能 注意 到 了 ， 在 脚本 5-14 中 没有 任何 JavaScript 代码 ， 只 有 一 行 调用 外 部 JavaScript 文件 
的 代码 。 此 外 , 我 们 在 页 面 中 还 引入 了 link 标签 的 特性 : newWin 类 。 同 iframe 的 示例 类 似 , 脚本 5-15 
包含 一 个 用 于 调用 函数 的 onload 事件 处 理 程序 ， 在 这 里 名 为 newinLinks。 这 个 函数 遍历 页 面 中 的 所 
有 链接 , 查看 是 否 包 含 newWin 类 。 如果 包含 newWin 类 , 那么 单 击 对 应 的 链接 就 会 调用 newWindow 函数 。 


























Opening a Window 
4 上 || 台 | 四 |@j [e] | 并 | REI © hup://dl.dropbox.com/u/2 © | (Ar coc 





The Master of the House 


Click on His name to behold He Who Must Be Adored 


Š OO _ pixelljpg 333x250 pixels 
Pixel 























图 5-9 ”打开 新 窗口 








p» 打开 新 窗口 

1. function newWindow() { 

首先 定义 一 个 名 为 newWindow() 的 函数 。 

2. var catWindow = window.open("images/pixel1.jpg", "catWin","resizable-no,width-350, height-260"); 


catWindow 包 含 一 个 新 的 窗口 对 象 ， 指 向 图 片 文件 pixell.jpg。 新 窗口 的 名 称 为 catwin。 名 称 是 必 填 
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项 ， 因 为 随后 的 代码 中 我 们 可 能 需要 通过 链接 或 其 他 脚本 来 指向 此 窗口 。 新 窗口 的 尺寸 为 350 像 素 宽 
和 260 像 素 高 。 这 些 参 数 是 可 选 的 。 


脚本 5-15 通过 下 面 的 脚本 打开 新 窗口 
window.onload = newWinLinks; 
function newWinLinks() { 
for (var i=0; i<document.links.length; i++) { 


if (document.links[i].className == "newWin") { 
document. links[i].onclick = newWindow; 
} 


} 
} 


function newWindow() { 


var catWindow = window.open("images/pixel1.jpg", "catWin", "resizable=no,width=350, height=260") ; 
return false; 


} 


不 要 阻止 弹出 窗口 ! 
本 章 剩 下 的 部 分 都 是 关于 如 何 使 用 JavaScript 创建 和 操作 窗口 的 。 这 些 特定 的 窗口 称 为 弹出 窗 
已 ， 而 且 被 很 多 网 友 视 为 眼中 钉 。 这 里 我 们 将 演示 关于 弹出 窗口 的 一 些 正 面 用 途 ， 不 过 如 果 你 的 济 
览 器 不 能 正常 运行 这 些 示例 ， 那 可 能 是 在 浏览 器 中 关闭 了 弹出 窗口 ， 也 可 能 是 正在 运行 的 其 他 软件 
禁用 了 弹出 窗口 。 大 部 分 浏览 器 可 以 打开 用 户 指定 的 弹出 窗口 ， 而 有 些 浏览 器 不 行 。 所以， 在 大 家 
学 习 本 章 内 容 的 时 候 ， 务 必 有 确 保 弹出 窗口 功能 是 打开 的 。 
然而 ， 有 些 浏览 器 (说 你 呢 ，Internet Explorer) 认为 自己 比 用 户 聪明 ， 号 称 为 了 安全 起 见 而 强 
制 关闭 了 脚本 中 的 弹出 窗口 功能 ， 即 便 是 用 户 请 求 打开 也 不 行 。 


V 提示 

O 在 第 2 步 中 , 在 width 和 height 参数 的 逗号 之 间 不 能 包含 任何 字符 。 如 果 包 含 其 他 字符 ， 很 
可 能 在 有 的 浏览 器 中 脚本 就 无 法 正常 运行 了 。 一 般 情况 下 ,直到 脚本 错误 时 , 需要 对 脚本 进行 
调试 ， 查 找 类 似 的 小 错误 。 语 法 错误 是 一 个 主要 的 报错 原因 ， 特 别 是 对 新 程序 员 来 说 。 

口 Internet Explorer 6 及 其 更 高 版 本 在 安全 方面 制定 了 一 些 稀奇 古怪 、 前 后 不 一 的 策略 ( 是 否 支 持 
脚本 控制 窗口 等 )。 如 果 关 闭 了 安全 策略 ， 那 么 本 章 的 所 有 示例 都 能 运行 ， 但 我 们 不 建议 开发 
人 员 关 闭 安 全 策略 或 者 要 求 网 站 的 访问 者 关闭 自己 的 安全 策略 。 此 外 , 在 TET 及 更 高 版 本 中 ， 
根据 用 户 选项 卡 式 的 浏览 器 设置 ， 新 窗口 可 以 在 新 标签 页 中 显示 。 









































在 窗口 中 添加 参数 
要 将 图 5-7 中 列 出 的 一 个 或 多 个 参数 添加 到 你 的 窗口 中 ,可 以 将 其 放置 在 open() 命 令 中 并 用 引 
号 封装 。 在 希望 保留 的 功能 名 称 后 面 加 上 =yes， 在 不 想 保留 的 功能 名 称 后 面 加 上 =no ( 因为 =no 通常 
是 默认 的 ， 所 以 开发 人 员 可 以 跳 过 这 些 功能 ， 不 予 设置 )。 例 如， 如 果 我 们 想 要 一 个 特定 尺寸 且 带 
有 工具 栏 、 地 址 栏 和 滚动 条 的 窗口 ， 将 下 面 的 代码 作为 open() 命 令 的 参数 即 可 。 
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"toolbar=yes, location=yes, scrollbars=yes,width=300,height=300"。 注意 , 这 样 创建 的 窗口 不 
带 有 菜单 栏 或 状态 栏 ， 大 小 也 不 可 以 改变 。 

直接 忽略 某 参 数 其 实 就 相当 于 将 其 置 为 =no ( 通常 是 这 样 的 ， 下 面 有 一 些 例外 情况 )。 开 发 人 员 
也 可 以 直接 使 用 参数 名 称 ( 不 带 =yes ) 来 开启 对 应 功能 。 由 于 存在 一 些 例外 情况 ， 所 以 我 们 建议 显 
式 地 声明 其 打开 和 关闭 状态 。 如 "location=yes,scrollbars=yes"。 

图 5-10 显示 的 是 脚本 5-15 在 Mac 中 的 Firefox3、Windows 的 Firefox2, IE 8, VAR Mac 的 Safari 
中 的 显示 效果 。 可 以 看 到 ， 每 个 浏览 器 的 显示 效果 都 不 尽 相 同 。 事 实 上 ， 真 正 达到 我 们 预期 效果 的 是 
Safari。 大 家 自己 得 到 的 结果 可 能 跟 我 们 的 不 一 样 。 拿 Firefox 来 说 ， 它 将 最 终 控制 权 交 给 用 户 一 一 如 果 
用 户 选择 始终 显示 状态 栏 ， 那 么 不 管 脚本 是 如 何 编写 的 ， 状 态 栏 都 会 一 直 显 示 。 

最 后 ， 开 发 人 员 仍 旧 需 要 考虑 其 用 户 可 能 使 用 的 浏览 器 ， 并 在 所 有 这 些 浏览 器 中 测试 自己 的 脚 
本 。 这 很 可 能 意味 着 测试 的 时 候 需要 用 到 Windows fe Mac ( 可 能 还 有 Linux ) 设备 。 测 试 脚本 (如 
果 有 必要 的 话 ， 还 需要 修订 脚本 ) 可 以 让 我 们 在 各 种 浏览 器 下 都 能 实现 预期 的 效果 。 
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图 5-10. ”不同 的 浏览 器 有 不 同 的 默认 窗口 ， 所 以 像 地 址 栏 之 类 的 元 素 会 始终 出 现在 
Firefox 中 ， 不 管 脚本 中 是 否 声明 显示 
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图 5-11 单 击 3 个 链接 中 的 任意 一 个 ， 都 会 打开 一 个 小 窗口 ， 
并 用 相应 的 小 猫 图 片 填 充 该 窗口 


5.8 为 窗口 加 载 不 同 的 内 容 


在 前 面 的 示例 中 , 单 击 链接 会 在 新 窗口 中 打开 一 幅 图 片 。 但 如 果 页 面 上 有 多 个 链接 ， 而 且 我 们 硕 
望 这 些 链接 都 指向 同一 个 窗口 该 怎么 办 ?” 脚本 5-16 演 示 了 这 种 技术 。 图 5-11 中 的 主 窗 口 有 3 个 链接 。 单 


击 其 中 任意 一 个 都 能 打开 新 窗口 ， 然 后 显示 相应 的 小 猫 图 片 。 如 果 切 换 回 主 窗口 ， 单 击 另 一 个 链接 的 
话 ， 小 窗口 中 的 图 片 会 被 新 图 片 替换 掉 。 






































脚本 5-16 ”通过 此 脚本 ， 可 以 打开 一 个 新 窗口 ， 其 中 根据 所 单 击 链接 的 不 同 ， 显 示 各 式 各 样 的 内 容 


window.onload = newWinLinks; 


function newWinLinks() { 
for (var i=0; i<document.links.length; i++) { 
if (document.links[i].className == "newWin") { 
document. links[i].onclick = newWindow; 


} 
} 


function newWindow() { 


var catWindow = window.open(this.href,"catWin", "width=350,height=260") ; 
catWindow. focus(); 


return false; 


j 
> 为 窗口 加 载 不 同 内 容 
1. document.links[i].onclick = newWindow; 


在 newWinLinks() 函 数 中 ， 我 们 通过 JavaScript 添 加 newwindow() PAZ US HI, fEJjonclickAb3ügs. 24 
newWindow() 被 调用 时 ， 使 用 this.href， 即 HTML 中 href 特 性 的 值 。 
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2. function newWindow() { 

这 里 我 们 定义 个 新 的 函数 : newWindow()。 

3.var catWindow = window.open(this. href,"catWin","width=350, height=260"); 

这 是 catwindow 变 量 , 我 们 正在 打开 一 个 新 的 窗口 对 象 , 带 有 窗口 的 各 项 参数 。 首先 传 人 this.href 
的 值 。 新 窗口 的 名 称 为 catWin，width 和 height 参 数 设 置 窗口 的 尺寸 。 

4. catWindow. focus(); 

这 里 使 用 focus() 方 法 使 得 我 们 新 打开 的 窗口 位 于 最 前 面 。 我 们 需要 显示 某 个 窗口 时 ， 就 可 以 使 
用 focus()。 如 果 同 时 有 多 个 窗口 打开 ,那么 使 用 focus() 可 以 将 指定 窗口 排列 在 最 顶端 。 

5. return false; 

函数 以 return false 结束 ， 告 知 HTML PERRA href. 

V 提示 

口 在 第 4 步 中 使 用 到 了 blur(), 它 是 与 focus() 作 用 相反 的 方法 。 使 用 blur() 方 法 可 以 将 窗口 置 

于 所 有 打开 窗口 的 最 后 面 。 窗口 对 象 的 focus() 和 blur() 方 法 对 应 于 onfocus 和 onblur 事件 处 

理 程序 ， 通 过 它们 可 以 在 窗口 获得 或 者 失去 焦点 时 执行 操作 。 




































































第 6 章 


表单 处 理 














aq 果 需 要 从 Web 站 点 的 用 户 那里 收集 信息 ， 那 么 就 需要 使 用 表单 。 
表单 可 以 包含 大 多 数 常见 的 图 形 界面 元 素 ， 包 括 输 入 字段 、 单 选 按钮 、 复 选 框 、 弹 出 菜单 
和 输入 列表 。 另 外 ，HTML 表单 可 以 包含 密码 字段 ， 这 种 控件 可 以 避免 用 户 的 输入 被 别人 偷 看 。 

在 填写 表单 之 后 ， 单 击 表单 上 的 Submit 按钮 ， 会 将 表单 的 信息 发 送 到 Web 服务 器 ， 在 服务 器 上 
CGI 程序 (CGI 代表 Common Gateway Interface， 它 是 在 Web 服务 器 上 运行 的 一 个 脚本 ) 会 解释 并 操 
作 这 些 数据 。 然 后 ， 常 常 将 数据 存储 在 数据 库 中 供 以 后 使 用 。 在 服务 器 端 存储 数据 之 前 ， 需 要 确保 用 
户 输 入 的 数据 是 “干净 ”的 ， 也 就 是 说 ， 数 据 是 准确 的 且 具 有 正确 的 格式 。JavaScript 是 检查 数据 的 
好 方法 , 这 种 技术 称 为 表单 验证 ( form validation )。 尽管 CGI 可 以 完成 验证 (而且 应 该 作为 预防 措施 ， 
因为 有 些 用 户 会 在 浏览 器 中 关闭 JavaScript 功能 )， 但 是 在 客户 机 上 用 JavaScript 进行 验证 要 快 得 多 ， 
而 且 用 户 操作 的 效率 也 更 高 。 

在 本 章 中 ， 你 将 学 习 如 何 使 用 JavaScript 确保 表单 包含 有 效 的 信息 ， 针 对 男 一 个 字段 中 的 数据 检 
查 一 个 字段 中 的 数据 ， 以 及 突出 显示 错误 的 信息 ， 让 用 户 知道 需要 修改 什么 。 

目前 需要 了 解 的 HTML 知识 见 表 6-1。 


表 6-1 目前 需要 了 解 的 HTML 知识 一 一 表单 



























































































































































form 这 个 标签 包含 下 面 的 任何 标签 ， 构 成 有 效 的 HTML 表单 
action 在 Web 服务 器 上 处 理 数 据 的 服务 器 端 CGI 的 名 称 
input 这 个 标签 显示 不 同类 型 的 表单 字段 ， 具 体 取决 于 type 属性 的 值 
class 分 配给 这 个 元 素 的 类 名 
id 分 配给 这 个 元 素 的 唯一 id, 与 其 他 JavaScript 对 象 一 样 ， 不 允许 有 空格 和 标点 符 
号 ,并且 不 能 以 数字 开头 
name 主要 用 来 对 单 选 按 钮 进行 分 组 
maxlength 用 户 可 以 在 这 个 字段 中 输入 的 数据 的 最 大 长 度 
size 在 页 面 上 显示 的 字符 数量 
type 所 需 的 输入 控件 类 型 ， 有 效 值 是 button checkbox, image, password, radio, 
reset, submit 和 text 
value 预先 为 这 个 表单 字段 设置 的 值 














label 书 来 为 没有 内 置 标签 的 控件 指定 标签 ， 比 如 文本 字段 、 复 选 框 、 单 选 按钮 和 菜单 
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( 续 ) 

标 签 属 性 意 xX 

for 将 标签 与 特定 元 素 的 id 关联 起 来 
option 在 select 标签 中 可 用 的 选项 

selected 指出 这 个 选项 是 否 作为 默认 选项 

value 每 个 选项 的 预 设 值 
select 这 种 表单 字段 显示 弹出 菜单 或 滚动 列表 ( 取决 于 size 属性 ) 

class 分 配给 这 个 元 素 的 类 

id 分 配给 这 个 元 素 的 唯一 id 

size 在 页 面 上 显示 的 选项 数量 。 如 果 这 个 属性 设置 为 1， 或 者 没有 提供 这 个 属性 ， 就 

会 显示 弹出 菜单 


6.1 选择 并 转移 导航 菜 上 


在 Web 上 你 可 能 见 过 许多 标准 的 导航 菜单 ， 可 以 选择 菜单 中 的 一 个 选项 并 单 击 Go 按钮 ， 这 样 就 
会 转 到 对 应 的 目的 地 。 例 如 ， 许 多 在 线 商 店 使 用 这 样 的 菜单 将 用 户 转 到 不 同 的 部 分 。 但 是 ， 只 需 用 上 
一 点 儿 JavaScript, 就 可 以 让 用 户 只 通过 菜单 选择 进入 不 同 的 目的 地 , 而 不 再 需要 Go 按钮 ( 见 图 6-1 )。 
这 会 使 用 户 觉得 站 点 更 干净 利落 而 且 响 应 性 更 好 ， 所 以 是 一 种 有 益 的 做 法 。 我 们 将 这 些 JavaScript 增 
强 菜 单 称 为 “选择 并 转移 ”菜单 ， 很 容易 创建 它们 。HTML 见 脚本 6-1, CSS 见 脚本 6-2, JavaScript 
见 脚本 6-3。 你 不 再 需要 Go 按钮 了 ! 
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图 6-1 选择 这 个 菜单 中 的 任何 选项 ， 就 会 直接 跳 到 对 应 的 页 面 ， 而 不 需要 单独 的 Go 按钮 
脚本 6-1 选择 并 转移 菜单 的 HTML 非常 简单 


<!DOCTYPE html> 
<html> 
<head> 
<title>Select and Go Navigation</title> 
<script src="script01.js"></script> 
<link rel="stylesheet" href="script01.css"> 
</head> 
<body> 
<form action="gotoLocation.cgi" class="centered"> 
<select id="newLocation"> 
<option selected>Select a topic</option> 
<option value="scripto6.html">Cross-checking fields</option> 
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«option value="scripto7.html">Working with radio buttons«/option» 
«option value="scripto8.html">Setting one field with another</option> 
«option value="scripto9.html">Validating Zip codes</option> 
«option value-"scriptiO.html"»Validating email addresses</option> 
</select> 
<noscript> 
<input type="submit" value="Go There!"> 
</noscript> 
</form> 
</body> 
</html> 


脚本 6-2 这 个 CSS 文件 的 内 容 并 不 多 ,但 是 当 你 想 添加 更 多 样式 时 ， 可 以 在 这 里 添加 


.centered { 
text-align: center; 


脚本 6-3 ”可 以 使 用 JavaScript 和 表单 实现 站 点 导航 


window.onload = initForm; 
window.onunload = function() {}; 


function initForm() { 
document. getElementById("newLocation").selectedIndex = 0; 
document. getElementById("newLocation").onchange = jumpPage; 


} 


function jumpPage() { 
var newLoc = document.getElementById ("newLocation"); 
var newPage = newLoc.options [newLoc.selectedIndex].value; 


if (newPage != "") { 
window. location = newPage; 
} 
} 


p^ 创建 选择 并 转移 菜单 


1. window.onload = initForm; 








window.onunload = function() {}; 

在 窗口 加 载 时 ， 调 用 initForm() eka. Fír f h. AA E ZEAREERAR OS DU V d TT PRAT 
为 的 变通 方法 。 

当 窗 口 缉 载 时 ( 即 关闭 窗口 或 者 浏览 器 转 到 男 一 个 网 址 ), ee 函数 ( anonymous 
function )， 即 没有 名 称 的 函数 。 在 这 个 示例 中 ， 这 个 函数 不 但 没有 名 称 ， 而 且 根 本 不 做 任何 事情 。 提 
供 这 个 函数 是 因为 必须 将 onunload 设置 为 某 种 东西 ， 否 则 ， UBER back 按钮 时 ， 就 不 会 触 
发 onload 事件 ， 因 为 在 某 些 浏览 器 (比如 Firefox 和 Safari ) 中 页 面 会 被 缓存 。 让 onunload 执行 任何 
操作 ， 就 会 使 页 面 不 被 缓存 ， 因此 当 用 户 后 退 时 ， 会 发 生 onload 事件 。 

匿名 是 指 在 function 和 () 之 间 没 有 名 称 。 这 是 触发 onunload Skid Nae 
ik. 与 任何 函数 中 一 样 , 花 括号 包含 函数 的 内 容 。 这 里 的 花 括号 是 空 的 ， 因为 这 个 函数 不 做 任何 事情 。 


2. document.getElementById("newLocation").selectedIndex = 0; 
document.getElementById("newLocation").onchange = jumpPage; 


在 initForm() 函 数 中 ， 第 一 行 获得 HTML 页 面 上 的 菜单 ( 它 的 id 为 newLocation ) ， 并 且 将 它 的 
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selectedIndex 属性 设置 为 零 ， 这 会 使 它 显 示 Select a topic. 
第 二 行 让 脚本 在 菜单 选择 发 生 改变 时 ， 调 用 jumppage() 函 数 。 
3. var newLoc = document.getElementById("newLocation"); 
在 jumpPage() 函数 中 ，newLoc 变量 查找 访问 者 在 菜单 中 选择 的 值 。 
4. var newPage = newLoc.options[newLoc.selectedIndex].value; 
从 方 括号 中 的 代码 开始 ， 向 外 依次 分 析 。newLoc.selectedIndex 是 一 个 从 0~ 5 的 数字 (因为 有 6 
个 菜单 选项 。 记 住 JavaScript 的 编号 常常 是 基于 零 的 )。 得 到 这 个 数字 之 后 ,， 接 下 来 获得 对 应 的 菜单 项 
的 值 ， 这 就 是 我 们 希望 跳 转 到 的 网 页 的 名 称 。 然 后 ， 将 结果 赋值 给 变量 newPage。 
5. if (newPage !- "") { 
window.location = newPage; 
这 个 条 件 语句 首先 检查 newPage 是 否 非 空 。 换 句 话说， 如 果 newPage 有 一 个 值 ， 那 么 让 窗口 转 到 
选择 的 菜单 项 所 指定 的 URL. 
Vv 提示 
口 这 个 脚本 最 棒 的 一 点 是 ， 在 添加 了 JavaScript 函数 之 后 ， 当 添加 、 修 改 或 改变 下 拉 菜 单项 时 ， 
根本 不 需要 修改 这 个 函数 ， 只 需要 设置 莱 单 项 的 值 ( 即 莱 单项 跳 转 到 的 URL )。 因 此 ， 这 个 脚 
本 很 适合 WYSIWYG 页 面 编辑 器 。 
O 正如 前 面 提 到 的 ，Firefox 会 对 页 面 进行 缓存 ， 因 此 在 单 击 back 按钮 时 不 会 触发 onload 事件 。 
前 面 提供 了 一 种 变通 方法 ， 另 一 种 可 以 采用 的 方法 是 添加 下 面 这 行 代 但 : 
window.onpageshow = initForm; 
我 们 没有 采用 这 种 方法 ， 因 为 它 在 Safari ( 另 一 种 对 页 面 进行 缓存 的 浏览 器 ) 中 不 起 作用 。 但 
是 ， 如 果 你 专门 针对 Firefox 设计 网 站 ， 那 么 应 该 知道 有 两 个 非 标准 的 窗口 事件 处 理 程序 : 
onpageshow 和 onpagehide， 可 以 使 用 它们 处 理 只 希望 在 Firefox 中 触发 的 事件 。 
O 我 们 将 这 些 菜单 称 为 “选择 并 转移 ”菜单 ， 这 个 名 称 并 不 太 好 听 , 但 是 清楚 地 表明 了 它们 的 作 
用 。 你 可 能 会 看 到 对 同样 的 功能 有 别 的 称呼 。 例 如 , Dreamweaver 将 它们 称 为 “ 跳 转 菜单 "jump 
menu ) 顺便 说 一 句 ， 如 果 你 是 Dreamweaver 用 户 ,需要 一 本 深入 介绍 Dreamweaver 的 好 书 ， 那 
么 我 们 推荐 我 们 所 写 的 Dreamweaver: Visual QuickStart Guide ( Peachpit Press )。 









































































































































照顾 不 支持 JavaScript 的 用 户 

这 个 示例 的 目标 是 ， 在 使 用 表单 跳 转 到 另 一 个 页 面 时 ， 利 用 JavaScript 避免 使 用 Go 按钮 。 但 
是 ， 如 果 用 户 使 用 老式 的 不 支持 JavaScript 的 浏览 器 ,或 者 关闭 了 浏览 器 的 JavaScript 功能 ， 那 么 
该 怎么 办 ? 没 问题 ， 脚 本 6-1 会 让 Go 按钮 只 在 不 支持 JavaScript 时 显示 ， 从 而 照顾 这 些 用 户 。 

用 表单 从 一 个 页 面 跳 转 到 另 一 个 页 面 而 不 使 用 JavaScript 的 唯一 方法 是 使 用 CGI,CGI 是 在 Web 
服务 器 上 运行 的 一 个 程序 。 脚 本 6-1 在 下 面 这 一 行 中 调用 CGI: 

«form action="gotoLocation.cgi"> 

这 个 form 标签 有 action 属性 ， 它 会 调用 CGI。 但 是 ， 表 单 action 属性 要 求 用 户 单 击 submit 
按钮 ， 而 图 6-1 中 没有 这 样 的 按钮 。 但 是 ， 在 图 6-2 中 有 submit 按钮 ， 这 是 在 关闭 JavaScript 功能 
时 显示 的 页 面 。 下 面 这 些 代码 行 提供 按钮 (包围 在 noscript 标签 中 )， 只 有 在 缺少 JavaScript 支持 





102 第 6 章 表单 处 理 





时 这 些 代码 才 会 执行 。 


<noscript><input type="submit" value="Go There!"> </noscript> 











[E Select and Go Navigation - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 
Pc 4$ | http///dl.dropbox.com/u/2127486/ -| |28- Gog P ie] 
..| Chapter6 X | || Select and Go Navigation x | 
Selecta topic ~ | Go There! | 
Done 2 d 














图 6-2 ”如 果 用 户 的 浏览 器 不 文 持 JavaScript， 他 们 仍然 能 够 在 你 
的 站 点 上 进行 跳 转 ， 因 为 Go There! 按钮 会 自动 出 现 


最 酷 的 是 ，CGI 只 在 缺少 JavaScript 支持 时 被 调用 。 如 果 用 户 使 用 支持 JavaScript 的 浏览 器 ， 
ARA submit 按钮 就 不 会 出 现 ， 而 CGI 就 是 不 必要 的 。 


6.2 ”动态 地 改变 菜单 


常常 需要 通过 弹出 菜单 向 用 户 提供 选择 输入 的 机 会 ， 而 且 希 望 根据 用 户 在 男 一 个 弹出 菜单 中 
所 做 的 选择 ,改变 一 个 或 多 个 弹出 菜单 的 内 容 。 在 Web 站 点 上 ,你 可 能 见 过 这 样 的 情况 : 站 点 让 
你 从 一 个 弹出 菜单 中 选择 你 所 在 的 国家 ， 然 后 根据 你 的 选择 ， 用 州 或 省 的 名 称 填充 第 二 个 菜单 。 
在 脚本 6-4 (HTML ) 和 脚本 6-5 (JavaScript) 中 ,我们 要 使 用 两 个 弹出 菜单 ( 见 图 6-3 )。 第 一 个 
菜单 用 来 选择 月 份 。 当 用 户 选 择 一 个 月 份 时 , 脚本 根据 所 选 月 份 的 天 数 , 填充 第 二 个 弹出 菜单 ( 见 
图 6-4 )。 




































































PES) 
File Edit View History Bookmarks Tools Help 
.ec GY || hittp://dl.dropbox.com/u/2127486, 5; ~| $$- Googie P ia] 
| Chapter6 x | | | Dynamic Menus x |^ 
Febnay >) (UIs) 
iE 
eoo Dynamic Menus in, 
@ http: //www.javascriptworld.com/chap0 = Q~ Google >» : 
= SESS EES — ——_ ——_——_ s=s=s=s=ssd 6 
7 
| Month EI | Day =) 3 | 
10 
11 
12 
13 
4 
15 
16 
17 
18 
19 
20 
A Done - d 
E ` ` 二 天 
图 6-3” 当 用 户 在 Month 菜单 中 作出 选择 时 ， 图 6-4 ”选择 一 个 月 份 的 结果 : Day 菜单 中 














会 自动 地 填充 Day 菜单 的 内 容 显示 这 个 月 正确 的 天 数 
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脚本 6-4 弹出 菜单 的 HTML 列 出 了 月 份 ， 但 是 没有 列 出 天 


<!DOCTYPE html» 
<html> 
<head> 
<title>Dynamic Menus</title> 
<script src-"script02.js"»«/script» 
</head> 
<body> 
<form action="#"> 
<select id="months"> 
<option value="">Month</option> 
<option value="0">January</option> 
<option value="1">February</option> 
<option value="2">March</option> 
<option value="3">April</option> 
<option value="4">May</option> 
<option value="5">June</option> 
<option value="6">July</option> 
<option value="7">August</option> 
<option value="8">September</option> 
<option value="9">0ctober</option> 
<option value="10">November</option> 
<option value="11">December</option> 
</select> 
&nbsp; 








<select id="days"> 
<option>Day</option> 
</select> 
</form> 


</body> 
</html> 


脚本 6-5 在 弹出 菜单 中 选择 一 个 值 ， 然 后 就 可 以 创建 第 二 个 弹出 菜单 的 内 容 


window.onload = initForm; 





function initForm() { 
document.getElementById("months").selectedIndex = 0; 
document.getElementById("months").onchange = populateDays; 
} 


function populateDays() { 
var monthDays = new Array(31, 28,31, 30,31, 30, 31,31, 30,31, 30,31); 
var monthStr = this.options[this.selectedIndex].value; 


if (monthStr !- "") { 
var theMonth = parseInt(monthStr); 


document.getElementById("days").options.length - 0; 
for(var i=0; i<monthDays[theMonth];i++) { 
document .getElementById("days").options[i] = new Option(i+1); 
} 
} 
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> 动态 地 改变 菜单 








1. var monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31); 

这 个 新 数组 包含 对 应 于 12 个 月 的 12 个 数字 ， 即 每 个 月 的 正确 天 数 。 这 个 数组 存储 在 变量 month - 
Days 中 。 

2.var monthStr = this.options [this.selectedIndex].value; 

我 们 使 用 this 用 户 在 第 一 个 菜单 中 选择 的 月 份 ) 从 菜单 中 获得 值 , 并 且 将 它 存 储 在 monthStr 中 。 

3. if (monthStr !- "") { 

var theMonth = parseInt(monthStr) ; 

如 果 monthStr 的 值 是 ", 那么 用 户 就 是 在 菜单 中 选择 了 单词 Month ， 而 不 是 月 份 名 。 这 些 代码 的 
作用 是 检查 monthstr 的 值 是 否 不 是 "" ， 如 果 这 个 条 件 为 真 ， 那 么 用 parseInt 方法 将 monthStr 转换 为 
数字 ， 并 且 将 变量 theMonth 设置 为 这 个 结 

4. document.getElementById("days").options.length = 0; 


for(var i=0; i«monthDays[theMonth]; i++) { 
document.getElementById("days").options[i] = new Option(i+1); 


在 改变 Day 菜单 时 ,首先 将 它 的 选项 长 度 设置 为 零 ， 这 会 消除 以 前 操作 的 影响 。 这 个 循环 简单 地 
遍历 所 选 月 份 中 的 每 一 天 ， 为 每 一 天 在 菜单 中 添加 一 个 新 选项 。 传 递 给 Option 的 是 it+1， 这 使 它 显示 
1 ~31， 而 不 是 0 ~30。 

v 提示 

O monthDays 数组 包含 每 个 月 的 天 数 ， 如 果 不 是 半年 的 话 ， 这 种 方式 就 没 问 题 。 要 想 让 脚本 能 够 

处 理 装 年 ， 就 需要 改变 monthDays 中 二 月 的 值 。 


6.3 ”建立 必须 填写 的 字段 


在 填写 表单 时 ， 可 能 希望 指定 用 户 必 须 填 写 某 些 字段 ， 然 后 才能 提交 表单 。 可 以 使 用 JavaScript 
检查 某 些 或 所 有 字段 是 否 已 经 填写 了 。 在 这 个 示例 中 ,我 们 使 用 HTML. CSS 和 JavaScript ( 分别 是 
脚本 6-6、 脚 本 6-7 和 脚本 6-8 ) 通过 红色 的 边框 和 黄色 的 内 部 颜色 突出 显示 未 填写 的 字段 。 检 查 在 用 
户 单 击 表单 的 Submit 按钮 时 进行 。 


脚本 6-6 ”密码 检查 示例 的 HTML 


<!DOCTYPE html» 

<html> 

<head> 
<title>Password Check</title> 
<link rel="stylesheet" href="script03.css"> 
«script src="script03.js"></script> 

</head> 

<body> 

<form action="#"> 
<p><label for="userName">Your name:<input type="text" size="30" id="userName" class="reqd"></label> </p> 
<p><label for="passwd1">Choose a password: <input type="password" id="passwd1" class="reqd"></label></p> 
<p><label for-"passwd2"»Verify password:<input type="password" id="passwd2" class="reqd passwd1"» 
—«/label»«/p» 
<p><input type="submit" value="Submit">&nbsp;<input type-"reset"»«/p» 
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</form> 
</body> 
</html> 
脚本 6-7 这 段 CSS 为 无 效 的 表单 元 素 设置 样式 
body { 


color: #000; 
background-color: #FFF; 
} 


input.invalid { 
background-color: #FF9; 
border: 2px red inset; 


} 


label.invalid { 
color: #F00; 
font-weight: bold; 
} 


脚本 6-8 这 个 脚本 是 本 章 中 其 余 所 有 示例 的 基础 ， 可 以 使 用 这 个 框架 添加 额外 的 有 效 性 检查 


window.onload = initForms; 





function initForms() { 
for (var i=0; i< document.forms.length;i++) { 
document.forms[i].onsubmit = validForm; 
} 


} 


function validForm() { 
var allGood = true; 
var allTags = document.getElementsByTagName("*") ; 


for (var i-0; i«allTags.length; i++) { 
if (!validTag(allTags[i])) ( 
allGood = false; 
} 
} 


return allGood; 


function validTag(thisTag) { 
var outClass = ""; 


var allClasses = thisTag.className. split(" "); 


for (var j=0; j<allClasses.length; j++) { 
outClass += validBasedOnClass (allClasses[j]) + " "; 
} 


thisTag.className = outClass; 


if (outClass.indexOf("invalid") > -1) { 
thisTag.focus(); 
if (thisTag.nodeName == "INPUT") { 
thisTag.select(); 


return false; 


} 


return true; 


function validBasedOnClass(thisClass) { 
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var classBack = ""; 


switch(thisClass) { 
case "": 
case "invalid": 
break; 
case "reqd": 
if (allGood 8& thisTag. value == "") { 
classBack - "invalid "; 


classBack += thisClass; 
break; 

default: 
classBack 4- thisClass; 


return classBack; 


} 
} 
这 种 检查 方法 的 基本 原理 如 下 : HTML 中 的 class 属性 表示 我 们 希望 JavaScript 执行 哪 种 检查 。 
如 果 检 查 失败 ， 就 在 class 属性 的 列表 中 添加 invalid。 这 样 做 会 出 现 两 种 现象 : (1) 表单 提交 失败 ; 
(2) 脚本 6-7 中 的 CSS 改变 这 个 字段 在 页 面 上 的 外 观 ( 见 图 6-5 )。 



































1g) passwor rd Check - Mozilla Firefox r=) 
File Edit View History Bookmarks Tools Help 
V C A http://dl.dropbox.com/u/2127486, 5; ~| |$- 
|.) Chapter6 x | | | Password Check 


Your name: Tom 


Choose a password: 
Verify password: eeeeeee 


( Submit Jí Reset ] 








Done 











图 6-5 ”通过 突出 显示 背景 色 让 用 户 知道 某 个 字段 有 问题 ， 从 而 确保 用 户 正确 输入 密码 
2 建立 必须 填写 的 字段 











1. function initForms() { 


for (var i=0; i« document. forms.length; i++) { 
document.forms[i].onsubmit - validForm; 














当 页 面 首 次 加 载 时 ， 调 用 initForms() 函 数 。 这 个 函数 遍历 页 面 上 的 每 个 表单 。 对 于 每 个 表单 ， 
它 为 表单 的 onsubmit 添加 一 个 事件 处 理 程序 : 调用 validForm。 当 onsubmit 处 理 程序 返回 false 值 时 ， 
表单 就 不 会 被 传递 回 服务 器 。 只 有 在 返回 true 值 时 ， 服 务 器 才 会 收 到 表单 〈 因 此 ， 运 行动 作 属性 中 
存储 的 CGI )。 
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2. var allTags = document.getElementsByTagName("*") ; 

document.getElementsByTagName("*") 是 非常 有 用 的 星 号 让 JavaScript 返回 一 个 包含 页 面 上 所 
有 标签 的 数组 。 然 后 ， 就 可 以 遍历 allTags 数组 来 寻找 感 兴趣 的 标签 。 

3. for (var i=0; i<allTags.length;i++) { 

if (!validTag(allTags[i])) { 
allGood = false; 

这 个 循环 在 allTags 中 进行 搜索 , 而 if 条 件 语句 调用 validTag() PAA, KAMAE RE. TA 
是 否 有 什么 东西 阻止 表单 提交 这 个 页 面 。 传 递 给 validTag() 函 数 的 是 allTags[i] ， 也 就 是 当前 正在 处 
理 的 对 象 。 如 果 任 何 标签 导致 validTag() 返 回 false， 就 将 allGood 设置 为 false。 但 是 ， 即 使 已 经 出 
现 了 false, 我 们 仍然 继续 循环 遍历 所 有 标签 。 

4. return allGood; 

现在 返回 allGood， 以 此 表明 是 否 应 该 继续 提交 表单 。 

5. function validTag(thisTag) { 

创建 validTag() 函 数 ， 并 且 让 它 接 收 thisTag 值 。 

6. var allClasses = thisTag.className.split(" "); 

对 于 每 个 标签 ， 我 们 希望 检查 每 个 class 属性 ( 请 记 住 ，class 可 以 设置 为 多 个 属性 )。 创 建 
allClasses 数组 并 且 用 thisTag.className.split(" ") 设 置 它 。 这 个 函数 会 按照 传递 给 它 的 字符 串 ， 
将 字符 串 分 割 为 数组 。 在 这 里 ,分割 符 字符 串 是 一 个 空格 ,所 以 它 会 将 字符 串 "this that and the other" 
转换 为 一 个 包含 5 个 元 素 的 数组 : this, that, and, the 和 other. 

我 们 希望 检查 每 个 class 属性 ， 因 为 class 表示 我 们 希望 对 每 个 表单 字段 进行 什么 处 理 。 在 这 个 
示例 中 , 我 们 关心 的 一 个 值 是 reqd, 这 表示 必须 填写 这 个 字段 。 如 果 任 何 表单 字段 具有 class fH reqd, 
那么 它 必 须 包 含 某 些 值 。 

7. for (var j=0; j<allClasses.length;j++) { 

outClass += validBasedOnClass (allClasses[j]) +" "; 






































































































































这 个 循环 使 用 j 作为 循环 变量 ， 因 为 外 层 的 循环 已 经 使 用 了 io XF allClasses 中 的 每 个 class 
属性 循环 一 次 。 

对 于 每 个 类 ， 执 行 outClass += validBasedOnClass(allClasses[j]) +" ";。 这 会 调用 validBased- 
OnClass() PAA ( 后面 会 解释 这 个 函数 )， 并 且 传 递 当 前 查看 的 类 。 这 个 函数 返回 某 些 东西 ， 这 些 东 西 
加 上 一 个 空格 之 后 追加 到 outClass 变量 中 。 

8. thisTag.className = outClass; 

在 结束 allClasses 循环 时 ， 我 们 获得 outClass 的 内 容 并 且 将 它 放 进 thisTag.className， 这 会 覆盖 
这 个 表单 字段 当前 的 class 属性 。 这 是 因为 在 进行 处 理 期 间 class 可 以 改变 ， 稍 后 就 会 看 到 这 种 情况 。 

9. if (outClass.indexOf("invalid") > -1) ( 

在 新 的 class 属性 中 可 能 返回 的 值 之 一 是 单词 invalid， 所 以 要 检查 它 。 如 果 在 新 的 类 中 找到 了 
invalid， 就 说 明 有 问题 ， 因 此 执行 对 应 的 操作 。 

10. thisTag.focus(); 

如 果 这 个 表单 字段 可 以 获得 焦点 〈 还 记得 吗 ， 我 们 在 第 5 章 中 讨论 过 焦点 )， 那 么 希望 将 焦点 放 
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进 这 个 字段 ， 这 一 行 就 完成 这 个 任务 。 这 是 让 用 户 知 道 哪个 字段 有 问题 的 一 种 方法 。 
11. if (thisTag.nodeName == "INPUT") { 
thisTag.select(); 
) 

这 些 代 码 的 基本 意思 是 ,“ 当 前 查看 的 这 个 标签 是 cinput> 标 签 吗 ? 如 果 是 ， 就 选择 它 的 值 ， 让 用 
户 能 够 更 轻松 地 修改 它 。 
12. return false; 
我 们 仍然 在 “返回 无 效 元 素 ” 块 中 ， 所 以 将 false 返回 到 进行 调用 的 地 方 。 
13. return true; 
如 果 所 有 一 切 都 运行 良好 并 且 有 效 ， 就 返回 true. 
14. function validBasedOnClass(thisClass) { 
创建 新 的 validBasedOnClass()PAZk, Jf ALLE HH thisClass ffi. 


un, 
3 



























































15. var classBack = 

创建 classBack 变量 ， 并 且 将 它 初始 化 为 空 。 这 个 变量 将 包含 要 返回 的 类 ， 也 就 是 我 们 希望 发 送 
回 的 值 。 

16. Sikhent thisc lass) { 

switch 语句 检查 (在 thisClass 中 ) 传递 给 它 的 一 个 class 属性 ， 并 根据 这 个 属性 执行 对 应 
的 操作 。 


17. case 








case "invalid": 
break; 
如 果 thisClass 是 空 的 或 是 invalid， 那 么 就 跳出 条 件 语 句 ， 否 则 继续 。 
18. case "reqd": 
if (allGood && thisTag.value == ""){ 
classBack = "invalid "; 





} 
classBack += thisClass; 
break; 
如 果 正 在 处 理 的 属性 是 reqd, allGood 是 true， 而 且 当 前 标签 的 当前 值 是 ""( 即 空 字符 串 ), 那么 
将 classBack 设置 为 invalid， 因 为 这 说 明 有 问题 ， 我 们 硕 望 通知 用 户 。 在 此 之 后 ， 无 论 是 否 有 问题 ， 
我 们 都 将 当前 的 类 追加 到 classBack 中 ， 使 它 不 会 丢失 。 
19. default: 
classBack += thisClass; 
如 果 上 面 的 分 支 与 发 生 的 情况 都 不 匹配 ， 就 会 执行 default 块 。 当 发 生 这 种 情况 时 ， 就 说 明 当前 
处 理 的 类 是 我 们 不 关心 的 ， 所 以 只 需要 将 它 追 加 到 classBack 中 ， 而 不 必 担 心 其 他 事情 。 
20. return classBack; 
最 后 ， 返 回 classBack. 
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6.4 根据 其 他 字段 对 字段 进行 检查 


经 常 需要 根据 另 一 个 字段 对 一 个 字段 进行 检查 ,尤其 是 在 要 求 用 户 设置 密码 时 。 为 了 确保 密码 正 
确 , 希望 用 户 输入 密码 两 次 ， 并 确保 两 次 的 输入 完全 相同 。 

这 个 示例 重用 了 脚本 6-6 (HTML ) 和 脚本 6-7 ( CSS), 而 且 只 需 在 脚本 6-8 中 添加 几 行 JavaScript 
( 见 脚本 6-9 )， 使 这 个 脚本 具有 额外 的 核对 功能 。 结 果 见 图 6-6。 同 样 ， 当 检查 失败 时 ， 无效 的 字段 会 
显示 红色 的 边框 。 




















(g) Passwor d Check - Mozilla Firefox erm) 
Eile Edit View History Bookmarks Tools Help 
> Cc fi |] http://dl.dropbox.com/u/2127486, {7 ~| |$- » 闻 
Your name: Tom 
Choose a password: eee 
Verify password: | 
Submit | | Reset 
Done e d 


























图 6-6 ”对 两 个 密码 字段 进行 核对 ， 确 保 它 们 的 内 容 是 相同 的 。 如 果 不 匹 配 ， 就 显示 图 中 的 效果 
脚本 6-9 使 用 这 个 脚本 比较 两 个 字段 的 值 ， 检 查 它 们 是 否 匹 配 


window.onload = initForms; 





function initForms() { 
for (var i=0; i« document.forms.length; i++) { 
document. forms[i].onsubmit = validForm; 
} 
} 


function validForm() { 
var allGood = true; 
var allTags = document.getElementsByTagName("*") ; 


for (var i=0; i«allTags.length; i++) { 
if (!validTag(allTags[i])) { 
allGood = false; 
} 


} 


return allGood; 


function validTag(thisTag) { 
var outClass = ""; 


var allClasses = thisTag.className.split(" "); 


for (var j=0; j<allClasses.length; j++) { 
outClass += validBasedOnClass(allClasses[j]) + " " 


3 
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thisTag.className = outClass; 


if (outClass.indexOf("invalid") > -1) { 
thisTag.focus(); 
if (thisTag.nodeName -- "INPUT") ( 
thisTag.select(); 
} 


return false; 


} 


return true; 


function validBasedOnClass (thisClass) { 
var classBack = ""; 


switch(thisClass) { 
case "": 
case "invalid": 
break; 
case "reqd": 
if (allGood 8& thisTag.value == "") { 
classBack = "invalid "; 


classBack += thisClass; 
break; 
default: 
if (allGood 8& !crossCheck (thisTag,thisClass)) { 
classBack = "invalid "; 


classBack += thisClass; 


return classBack; 


) 


function crossCheck (inTag,otherFieldID) { 
if (!document.getElementById (otherFieldID)) { 
return false; 


return (inTag.value -- document. getElementById(otherFieldID).value); 


> 根据 另 一 个 字段 对 一 个 字段 进行 检查 











1. if (allGood && !crossCheck (thisTag,thisClass)) { 
classBack = "invalid "; 


} 
现在 , 我 们 要 检查 两 个 密码 字段 是 否 相 同 。 因 为 第 二 个 密码 字段 的 类 包含 passwdi ( 见 脚本 6-6 ), 
所 以 这 个 JavaScript 脚本 知道 它 必须 根据 第 一 个 密码 字段 核对 第 二 个 密码 字段 。 这 在 条 件 语句 的 
default 块 中 进行 处 理 。 如 果 allGood 是 true H. crossCheck() Kt ( 见 下 面 ) 发 现 了 问题 (并 返回 
false )， 那 么 就 将 classBack 设置 为 invalid. 


2. function crosscheck (inTag,otherFieldID) { 


if (!document.getElementById (otherFieldID)) { 
return false; 





























zu 











return (inTag.value -- document. getElementById(otherFieldID). value); 
} 


这 是 crossCheck() 函 数 。 它 接收 当前 标签 和 检查 所 针对 的 另 一 个 字段 的 id。 在 这 个 示例 中 ， 当 前 
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标签 是 passwd2 <input> ， 另 一 个 字段 的 id 是 passwd1。 如 果 另 一 个 字段 不 存在 ， 就 无 法 进行 检查 ， 这 
就 说 明 有 问题 ， 所 以 函数 返回 false。 和 否则 ， 这 两 个 字段 都 存在 ， 所 以 可 以 比较 它们 的 值 : 如 果 相 同 ， 
就 返回 true; 如 果 不 同 ， 就 返回 false。 
w 提示 
口 这 个 脚本 并 没有 根据 主 密 码 数据 库 检 查 用 户 输 入 的 密码 是 否 有 效 ， 这 种 任务 需要 服务 器 上 的 
CGI 来 实现 ， 它 只 是 确保 用 户 两 次 输入 的 密码 是 相同 的 。 


6.5 标识 有 问题 的 字段 


将 输入 字段 的 边框 改 为 红色 是 很 不 错 的 ， 但 是 如 果 能 够 让 有 问题 的 字段 再 醒目 一 点 儿 就 更 好 了 。 
在 这 个 示例 中 ,你 将 学 习 如 何 将 字段 旁边 的 标签 设置 为 红色 的 粗 体 字 ， 从 而 使 出 问题 的 字段 更 加 明显 
( 见 图 6-7). TREE, HTML 和 CSS 文件 没有 改动 (仍然 是 脚本 6-6 和 脚本 6-7 )。 在 脚本 6-10 rP, 我们 
在 脚本 6-9 中 添加 了 几 行 JavaScript 代码 以 进一步 突出 显示 输入 错误 。 









































@ Passwor d Check - Mozilla Firefox (eta) 
File Edit View History Bookmarks Iools Help 
Mel GY || http///dl.dropbox.com/u/2127486 -| |$- Google P ies] 


Your name: Tom 

Choose a password: eeeee 

Verify password: | 
[ Submit | ( Reset | 











Done ade 








图 6-7” 当 出 现 问题 时 ， 可 以 让 字段 的 标签 成 为 红色 的 粗 体 字 ， 字 段 本 身 也 改变 样式 
脚本 6-10 ” 当 发 现 错误 时 ， 这 个 脚本 会 突出 显示 错误 的 字段 的 标签 


window.onload = initForms; 





function initForms() { 


for (var i=0; i« document.forms.length; i++) { 
document. forms[i].onsubmit = validForm; 
} 


} 


function validForm() { 
var allGood = true; 


var allTags = document.getElementsByTagName("*") ; 


for (var i=0; i«allTags.length; i++) { 
if (!validTag(allTags[i])) { 
allGood = false; 
} 
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return allGood; 


function validTag(thisTag) { 
var outClass = ""; 
var allClasses = thisTag.className.split(" "); 


for (var j=0; j<allClasses.length; j++) { 
outClass += validBasedOnClass(allClasses[j]) + " "; 
j 


thisTag.className = outClass; 


if (outClass.indexOf("invalid") > -1) { 
invalidLabel(thisTag.parentNode); 
thisTag.focus(); 


if (thisTag.nodeName -- "INPUT") ( 
thisTag.select(); 


return false; 


) 


return true; 


function validBasedOnClass(thisClass) { 


var classBack - ""; 


switch(thisClass) ( 
case "": 
case "invalid": 
break; 
case "reqd": 
if (allGood && thisTag.value == "") { 
classBack = "invalid "; 


classBack += thisClass; 
break; 
default: 
if (allGood && !crossCheck (thisTag,thisClass)) { 
classBack = "invalid "; 


classBack += thisClass; 


return classBack; 


} 


function crosscheck (inTag,otherFieldID) { 
if (!document.getElementById (otherFieldID)) { 
return false; 


j 
return (inTag.value -- document.getElementById(otherFieldID).value); 


function invalidLabel(parentTag) { 
if (parentTag.nodeName == "LABEL") { 
parentTag.className += " invalid"; 


} 
} 
} 


> 标识 有 问题 的 表单 字段 








1. invalidLabel(thisTag.parentNode); 
这 行 代码 被 添加 到 validTag() 内 的 无 效 检查 中 。 如 果 当 前 字段 没有 通过 有 效 性 检查 ， 那 么 我 们 希 
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望 检查 是 否 能 够 使 包围 这 个 元 素 的 标签 也 成 为 无 效 的 。 为 此 ， 要 调用 新 的 invalidLabel() 函 数 ( P if 
有 解释 ) 并 且 将 当前 标签 的 父 标签 传递 给 它 。 也 就 是 说 ， 如 果 passwdi 输入 字段 出 了 问题 ， 那 么 我 们 
希望 给 这 个 标签 和 包围 它 的 label 标签 都 分 配 class 属性 invalid。 所 以 , 一 旦 发 现 passwd1 输入 字段 
出 了 问题 ， 就 将 它 的 父 标 签 (label 标签 ) 传递 给 invalidLabel(), ， 从 而 检查 是 否 能 够 将 它 标记 为 无 
效 的 。 
2. function invalidLabel(parentTag) { 
if (parentTag.nodeName == "LABEL") { 





























parentTag.className += " invalid"; 
} 
} 

这 个 函数 接受 一 个 标签 并 且 检 查 这 个 标签 (tag) 是 否 是 一 个 标签 ( label )。 如 果 是 ， 就 在 它 的 类 
中 添加 invalid 属性 。 

现在 , 如果 试 图 提交 表单 ， 而 表单 上 有 错误 ,就 会 
看 到 有 问题 的 字段 的 标签 变 成 了 红色 的 粗 体 字 。 纠正 错 He Ed View fend Tock Hp 
误 ， 再 次 提交 表单 ， 标 签 就 会 恢复 为 黑色 。 mee Ao 

Car Picker 

6.6 准备 进行 表单 验证 

关于 前 几 个 示例 中 构建 的 脚本 ， 有 意思 的 一 点 是 : 
脚本 在 很 大 程度 上 独立 于 使 用 它 的 HTML 页 面 。 换 句 
话说 , 可 以 改 用 一 个 完全 不 同 的 页 面 , 其 中 包含 完全 不 
同 的 表单 ,而 且 只 需 对 脚本 略 做 修改 , 就 可 以 执行 你 需 
要 的 所 有 验证 任务 。 

例如 ,看 一 下 图 6-8， 这 是 一 个 表单 的 简化 版 本 ， 
用 户 可 以 使 用 它 定制 要 购买 的 汽车 。 这 个 表单 包含 各 种 
选项 和 界面 元 素 ,包括 单 选 按钮 、 荣 单 、 复 选 框 和 文本 
字段 , 它们 都 需要 检查 数据 输入 是 否 正确 。 这 个 表单 的 。 图 6-8 Car Picker 表单 使 用 了 文本 字段 、 
































Email Address: 


Colors: Choose a color [x] 





Options: | Power Windows 


| Sunroof (Two door only) 








Doors: Two Four 


Enter your Zip code or pick the dealer nearest you: 
California~Lemon Grove ^ 
California~Lomita F 
California-Long Beach 
California-Los Alamitos ~ 











Zip 







| Submit | [ Reset | 








@ Internet | Protected Mode: On 
























































HTML 见 脚本 6-11, CSS 见 脚 本 6-12。 在 本 章 的 其 余 弹出 菜单 、 复 选 框 和 单 选 按钮 , 这 
示例 中 ， 我 们 将 一 直 使 用 这 个 HTML. 些 都 是 常用 的 表单 元 素 





脚本 6-11 这 是 Car Picker 示例 的 完整 HTML 代码 页 面 


<!DOCTYPE html» 
<html> 
<head> 
<title>Car Picker</title> 
<link rel="stylesheet" href="script06.css"> 
<script src="script06.js"></script> 
</head> 
<body> 
<h2 class="centered">Car Picker</h2> 
«form action-"someAction.cgi"» 
«p»«label for-"emailAddr"»Email Address: 
<input id="emailAddr" type="text" size="30" class="reqd email"> 
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</label></p> 


<p><label for="color">Colors: 
<select id="color" class="reqd"> 


<option 
<option 
<option 
<option 
</select> 
</label></p> 
<p>Options: 


value-"" selected»Choose a color</option> 
value="Red">Red</option> 
value="Green">Green</option> 
value="Blue">Blue</option> 


<label for="sunroof"><input type="checkbox" id="sunroof" value="Yes">Sunroof (Two door only)</label> 
<label for="pWindows"><input type="checkbox" id="pWindows" value="Yes">Power Windows</label> 


</p> 


<p><label for="DoorCt">Doors : &nbsp; &nbsp; 
<input type="radio" id-"twoDoor" name-"DoorCt" value-"twoDoor" class="radio">Two 
<input type="radio" id-"fourDoor" name="DoorCt" value="fourDoor" class="radio">Four 


</label></p> 


<p><label for-"zip"»Enter your Zip code or pick the dealer nearest you:<br> 
Zip: <input id-"zip" type="text" size-"5" maxlength="5" class="isZip dealerList"> 


"dealerlist" size-"4" class="zip"> 

value-"California--Lemon Grove"»California--Lemon Grove«/option» 
value-"California--Lomita"»California--Lomita«/option» 
value-"California--Long Beach"»California--Long Beach«/option» 
value-"California--Los Alamitos"»California--Los Alamitos«/option» 
value-"California--Los Angeles">California--Los Angeles</option> 


<p><input type="submit" value="Submit">&nbsp;<input type="reset"></p> 


<select id= 
<option 
<option 
<option 
<option 
<option 
</select> 
</label></p> 
</form> 
</body> 
</html> 





脚本 6-12 ”这 里 显示 的 某 些 样式 只 能 以 后 使 用 


body { 
color: #000; 


background-color: #FFF; 


} 


input.invalid { 


background-color: #FF9; 
border: 2px red inset; 


} 


label.invalid { 
color: #F00; 


font-weight: bold; 


} 
select { 
margin-left: 80px; 
} 
input { 
margin-left: 30px; 
} 


input+select, input+input { 
margin-left: 20px; 


} 


6.6 准备 进行 表单 验证 115 





.centered { 
text-align: center; 
} 


JavaScript 文件 ( 见 脚 本 6-13 ) 是 在 本 章 前 面 使 用 的 脚本 基础 上 构建 的 。 我 们 在 脚本 中 添加 了 几 
行 代码 来 处 理 新 的 界面 元 素 , 脚本 的 其 他 部 分 是 相同 的 。 在 这 个 示例 中 , 你 将 看 到 为 了 进行 更 多 验证 ， 
需要 在 脚本 中 添加 什么 代码 ， 而 后 续 的 示例 将 更 深入 地 研究 特定 类 型 的 表单 元 素 。 
脚本 6-13 ”这 个 脚本 在 switch/case 条 件 结构 中 添加 了 儿 个 代码 块 ， 后 面 的 示例 将 利用 这 些 结构 


window.onload = initForms; 








function initForms() { 
for (var i=0; i< document.forms.length; i++) { 
document. forms[i].onsubmit = validForm; 
} 


} 


function validForm() { 
var allGood = true; 
var allTags = document.getElementsByTagName("*") ; 


“ou 


for (var i-0; i«allTags.length; i++) { 
if (!validTag(allTags[i])) { 
allGood = false; 
} 


return allGood; 


function validTag(thisTag) { 
var outClass = ""; 
var allClasses = thisTag.className.split(" "); 


for (var j=0; j<allClasses.length; j++) { 
outClass += validBasedOnClass(allClasses[j]) + " "; 
} 


thisTag.className = outClass; 


if (outClass.indexOf("invalid") > -1) { 
invalidLabel(thisTag.parentNode); 
thisTag.focus(); 
if (thisTag.nodeName -- "INPUT") ( 
thisTag.select(); 


return false; 


) 


return true; 


function validBasedOnClass(thisClass) { 
var classBack - ""; 


switch(thisClass) ( 

case "": 

case "invalid": 
break; 

case "reqd": 
if (allGood 8& thisTag.value == "") { 

classBack = "invalid "; 

j 





116 $63 表单 处 理 





classBack += thisClass; 
break; 

case "radio": 

case "isNum": 

case "isZip": 

case "email": 
classBack += thisClass; 
break; 

default: 
if (allGood 8& !crossCheck(thisTag,thisClass)) ( 

classBack = "invalid "; 

} 
classBack += thisClass; 


} 


return classBack; 


function crossCheck(inTag,otherFieldID) { 
if (!document.getElementById(otherFieldID)) { 
return false; 


j 
return (inTag.value !- "" || document.getElementById(otherFieldID).value !- ""); 


function invalidLabel(parentTag) { 
if (parentTag.nodeName -- "LABEL") ( 
parentTag.className += " invalid"; 





p 对 具有 许多 元 素 的 表单 进行 验证 








1. case "radio": 
case "isNum": 
case "isZip": 
case "email": 
classBack += thisClass; 
break; 
通过 在 validBasedOnClass() PA LAY switch/case 条 件 结构 中 添加 额外 的 代码 块 ， 我 们 使 这 个 
脚本 能 够 检查 更 多 的 字段 和 更 多 的 情况 。 我 们 在 分 支 列表 中 添加 了 radio, isNum, iszip 和 email. 
尽管 在 这 个 示例 中 不 对 它们 进行 验证 ,但 是 在 以 后 进行 验证 时 ,我们 不 希望 这 些 结构 造成 问题 ， 
所 以 对 于 每 个 还 未 处 理 的 属性 ， 要 在 switch/case 处 理 的 属性 列表 中 保留 它们 。 因 为 前 3 个 代码 
块 中 没有 指令 ， 所 以 它们 都 会 执行 email 分 支 中 的 代码 ， 这 里 的 代码 仅仅 将 当前 检查 的 属性 添加 
到 classBack 中 

















o 


2. xeturn (inTag.value !- "" || document.getElementById(otherFieldID).value !- ""); 
crossCheck() 中 的 这 一 行 做 了 一 点 儿 改动 。 这 里 不 再 比较 两 个 字段 是 否 相 等 ， 而 是 检查 是 否 至 少 


已 经 设置 了 两 个 字段 之 一 ( 这 是 为 表单 末尾 的 ZIP 编码 字段 和 列表 元 素 准 备 的 )。 如 果 其 中 至 少 一 个 
字段 包含 值 ， 那 么 返回 true; 如 果 它 们 都 不 包含 值 ， 那 么 返回 false. 
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6.7 处理 单 选 按钮 


单 选 按钮 这 种 界面 元 素 允 许 用 户 在 一 组 选项 中 选择 NS ( 而 且 只 能 选择 一 个 )。 当 需要 选择 
多 个 选项 之 一 时 ， 应 该 使 用 单 选 按 钮 。 如 图 6-9 所 示 ， 这 个 表单 让 假定 购买 汽车 的 顾客 用 单 选 按钮 选 
择 两 门 汽车 或 四 门 汽车 。 在 这 种 情况 下 ， 只 能 选择 这 id. 而 且 必 须 做 出 选择 。 












































Doors: OTwo G Four | | Doors: [C]rwo O Four 




















图 6-9 单 选 按钮 是 让 用 户 在 一 组 选项 中 只 选择 一 个 选项 的 最 佳 方法 


如 脚本 6-14 所 示 , 检查 是 否 选择 了 一 个 按钮 并 不 需要 很 多 脚本 代码 。 我 们 采用 的 方法 是 , 遍历 每 
个 按钮 并 且 检 查 它 的 状态 ， 如 果 没 有 选择 按钮 ， 就 将 单 选 按钮 的 标签 和 按钮 本 身 转换 为 红色 的 粗 体 。 


脚本 6-14 ”只 能 选择 一 个 单 选 按钮 ， 而 且 这 段 JavaScript 会 执行 界面 规则 


window.onload = initForms; 


















































function initForms() { 
for (var i=0; i« document.forms.length; i++) { 
document. forms[i].onsubmit = validForm; 
} 


} 


function validForm() { 
var allGood = true; 
var allTags = document.getElementsByTagName("*") ; 


for (var i=0; i«allTags.length; i++) { 
if (!validTag(allTags[i])) { 
allGood = false; 
} 


return allGood; 


function validTag(thisTag) { 
var outClass = ""; 
var allClasses = thisTag.className.split(" "); 


for (var j=0; j<allClasses. length; j++) { 
outClass += validBasedOnClass (allClasses[j]) + " " 
} 


thisTag.className = outClass; 


, 


if (outClass.indexOf("invalid") » -1) ( 
invalidLabel(thisTag.parentNode); 


thisTag.focus(); 
if (thisTag.nodeName -- "INPUT") ( 
thisTag.select(); 


return false; 


) 


return true; 


function validBasedOnClass(thisClass) { 
var classBack - ""; 
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switch(thisClass) { 
case "": 
case "invalid": 
break; 
case "reqd": 
if (allGood 8& thisTag.value -- "") ( 
classBack - "invalid "; 


classBack += thisClass; 
break; 
case "radio": 
if (allGood && !radioPicked (thisTag.name)) { 
classBack = "invalid "; 


classBack += thisClass; 
break; 
case "isNum": 
case "isZip": 
case "email": 
classBack += thisClass; 
break; 
default: 
if (allGood && !crossCheck (thisTag,thisClass)) { 
classBack = "invalid "; 


classBack += thisClass; 


return classBack; 


function crossCheck (inTag,otherFieldID) { 
if (!document. getElementById (otherFieldID)) { 
return false; 


return (inTag.value != "" || document.getElementById (otherFieldID).value != ""); 


function radioPicked(radioName) { 


var radioSet = ""; 


for (var k=0; k<document.forms. length; k++) { 
if (!radioSet) ( 
radioSet = document. forms[k][radioName] ; 


} 
if (!radioSet) { 
return false; 


} 
for (k=0; k<radioSet.length; k++) { 
if (radioSet[k].checked) { 
return true; 


} 


return false; 


} 


function invalidLabel(parentTag) { 
if (parentTag.nodeName == "LABEL") { 
parentTag.className += "invalid"; 
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> 确保 用 户 选择 一 个 单 选 按 钮 








1. if (allGood 8& !radioPicked(thisTag.name)){ 
classBack = "invalid "; 
这 行 代 码 在 switch/case 条 件 结构 的 radio 块 中 。 我 们 希望 确保 至 少 选择 一 个 单 选 按钮 ， 新 的 
radiopPicked() 函 数 处 理 这 个 问题 。 如 果 它 返回 false, MARK classBack 设置 为 invalid. 


2. function radioPicked(radioName) { 
var radioSet = ""; 


开始 新 的 radioPicked()PRZk, Jf HX} radioSet 变量 进行 初始 化 。 

这 个 函数 接受 单 选 按钮 组 的 名 称 ， 这 个 示例 中 就 是 DoorCt， 见 脚本 6-11。 注意 , 这 不 是 当前 标签 
Wid, class 或 我 们 常常 看 到 的 任何 东西 ,而 是 它 的 name。<input> 标 签 的 name 属性 使 HTML 知道 哪 
些 单 选 按钮 分 组 在 一 起 。 也 就 是 说 , 所 有 具有 相同 name 属性 的 <input> 标 签 都 属于 同一 个 单 选 按钮 组 。 

3. for (var k=0; k<document.forms.length; k++) { 


if (!radioSet) { 
radioSet = document. forms[k][radioName]; 












































} 

接 下 来 ,我们 遍历 当前 页 面 上 的 所 有 表单 。 我 们 知道 单 选 按钮 组 的 名 称 ， 但 是 不 知道 它 是 哪个 表 
单 的 一 部 分 , 而 给 定 的 页 面 上 可 能 有 多 个 表单 。 因 为 这 个 函数 处 于 另 一 个 采用 j 循环 计数 器 的 函数 中 ， 
所 以 这 里 的 循环 使 用 k。 

然后 ， 尝 试 将 radioset 设置 为 正在 查看 的 表单 中 单 选 按钮 组 的 名 称 。 如 果 找 到 这 个 单 选 按钮 组 ， 
radioSet 就 会 包含 一 个 值 。 

4. if (!radioSet){ 

return false; 

在 循环 结束 时 ， 查 看 radioSet 一 一 如 果 还 没有 设置 它 ， 就 返回 false， 因 为 无 法 找到 要 找 的 单 选 
按钮 组 ， 所 以 不 能 选择 单 选 按钮 。 

5. for (k=0; k<radioSet.length; k++) { 


if (radioSet[k].checked) { 
return true; 















































} 
ET, 我们 已 经 找到 了 要 检查 的 单 选 按 钮 组 。 现 在 ， 用 男 一 个 循环 检查 每 个 单 选 按钮 。 当 发 现 一 
个 单 选 按 钮 被 选中 时 ， 就 返回 true， 因 为 这 就 是 我 们 希望 保证 的 。 
6. return false; 
如 果 到 达 了 循环 末尾 的 这 个 语句 ， 那么 已 经 检查 了 整个 单 选 按钮 组 而 且 没 有 单 选 按钮 被 选中 。 在 
这 种 情况 下 ， 返 回 false， 并 且 改 变 单 选 按钮 的 标签 并 将 单 选 按钮 的 文本 改 为 红色 的 粗 体 。 


68 用 一 个 字段 设置 另 一 个 字段 


在 表单 上 常见 的 一 种 情况 是 ， 如 果 用 户 作 出 选择 ， 那 么 这 个 选择 会 影响 表单 上 其 他 字段 的 值 。 例 如 ， 
假设 只 有 在 两 门 汽 车 上 才能 选择 遮阳 做 (sunroof ) 选项 。 人 处 理 这 个 问题 有 两 种 方法 。 第 一 种 方法 是 检查 输 
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入 ， 如 果 用 户 做 出 了 错误 的 选择 ， 就 弹出 警告 对 话 框 。 但 是 ， 更 好 的 方法 是 蔡 用 户 进行 输入 。 所 以 ， 如 果 
用 户 选择 了 遮阳 篷 ， 脚 本 就 会 自动 选中 两 门 选项 ， 如 图 6-10 所 示 。 脚 本 6-15 演示 了 具体 做 法 。 















































Options: v] Sunroof (Two door only) Power Windows 








Doors: G Two O Four 





























图 6-10” 当 用 户 选 择 了 遮阳 篷 选 项 时 ， 脚 本 会 自动 设置 两 门 单 选 按钮 
脚本 6-15 处理 用 户 选 择 的 一 种 好 方法 是 ,根据 用 户 做 出 的 其 他 选择 自动 设置 字段 输入 


window.onload = initForms; 














function initForms() { 
for (var i=0; i« document.forms.length;i++) { 
document. forms[i].onsubmit = validForm; 
} 


document. getElementById("sunroof").onclick = doorSet; 


} 


function validForm() { 
var allGood = true; 
var allTags = document.getElementsByTagName("*") ; 


for (var i-0; i«allTags.length; i++) { 
if (!validTag(allTags[i])) ( 
allGood - false; 
j 


return allGood; 


function validTag(thisTag) { 


var outClass - ""; 
var allClasses - thisTag.className.split(" "); 


for (var j=0; j<allClasses.length; j++) { 
outClass += validBasedOnClass (allClasses[j]) + " "; 
j 


thisTag.className - outClass; 


if (outClass.indexOf("invalid") » -1) ( 
invalidLabel(thisTag.parentNode) ; 
thisTag.focus(); 
if (thisTag.nodeName -- "INPUT") ( 
thisTag.select(); 


return false; 


} 


return true; 


function validBasedOnClass(thisClass) { 


var classBack = ""; 


switch(thisClass) { 
case "": 
case "invalid": 
break; 
case "reqd": 
if (allGood && thisTag.value == "") { 
classBack = "invalid "; 
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classBack += thisClass; 
break; 
case "radio": 
if (allGood && !radioPicked(thisTag.name)) { 
classBack = "invalid "; 


classBack += thisClass; 
break; 
case "isNum": 
case "isZip": 
case "email": 
classBack += thisClass; 
break; 
default: 
if (allGood 8& !crossCheck(thisTag,thisClass)) { 
classBack = "invalid "; 


classBack += thisClass; 


return classBack; 


) 


function crossCheck(inTag,otherFieldID) { 
if (!document.getElementById(otherFieldID)) { 
return false; 


return (inTag.value !- "" || document.getElementById(otherFieldID).value !- ""); 


) 


function radioPicked(radioName) { 
var radioSet - ""; 
for (var k=0; k«document.forms.length; k++) { 
if (!radioSet) ( 
radioSet - document.forms[k][radioName]; 


) 


} 
if (!radioSet) { 
return false; 


} 
for (k=0; k<radioSet.length; k++) { 
if (radioSet[k].checked) { 
return true; 


} 


return false; 


} 


function invalidLabel(parentTag) { 
if (parentTag.nodeName == "LABEL") { 
parentTag.className += " invalid"; 


} 


function doorSet() { 
if (this.checked) { 
document .getElementById("twoDoor").checked = true; 





122 第 6 章 表单 处 理 


> 自动 设置 字段 值 











1. document.getElementById("sunroof").onclick = doorSet; 
这 行 代码 添加 在 initForms()'P. “4 FA PES PASE E VERI, RIAA doorSet () KX 
2. function doorSet() { 
if (this.checked) { 
document.getElementById("twoDoor").checked = true; 



































) 
} 
ePTFE PP UAT, MRE, DKF twoDoor 单 选 按钮 设置 为 true。 如 果 是 取 
消 选中 遮阳 答复 选 框 ， 那 么 不 做 任何 处 理 。 
w 提示 




















O 你 可 能 会 注意 到 ， 这 里 没有 检查 用 户 是 否 取 消 选 中 遮阳 篷 选 项 ， 然 后 重新 设置 fourDoor 单 选 
按钮 。 这 个 功能 留 给 读者 作为 练习 。 


6.9 检验 Zip 编码 


那些 古怪 的 用 户 可 能 在 表单 中 输入 几乎 任何 东西 ， 所 以 需要 确保 用 户 在 Zip 编码 字段 中 输入 的 内 
容 只 包含 数字 CE 6-11 )。 脚 本 6-16 演示 具体 做 法 。 








Enter your Zip code or pick the dealer nearest you: 


California-Lemon Grove ^ 
California-Lomita 
California-Long Beach 
Zip: 95448 California-Los Alamitos ¥ 


Al 6-11 可 以 确保 用 户 输入 了 Zip 编码 或 者 从 滚动 列表 中 作出 一 个 选择 
脚本 6-16 ”只 需 几 行 JavaScript 就 可 以 从 Zip 编码 中 消除 错误 的 字符 


window.onload = initForms; 














function initForms() { 
for (var i=0; i« document.forms.length; i++) { 
document. forms[i].onsubmit = validForm; 
} 


document .getElementById("sunroof").onclick = doorSet; 


function validForm() { 
var allGood = true; 
var allTags = document.getElementsByTagName("*") ; 


for (var i-0; i«allTags.length; i++) { 
if (!validTag(allTags[i])) ( 
allGood - false; 
j 
} 
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return allGood; 


function validTag(thisTag) { 
var outClass = ""; 
var allClasses = thisTag.className.split(" "); 


for (var j=0; j<allClasses.length; j++) { 
outClass += validBasedOnClass(allClasses[j]) + " "; 
} 


thisTag.className = outClass; 


if (outClass.indexOf("invalid") > -1) { 
invalidLabel(thisTag.parentNode); 
thisTag.focus(); 
if (thisTag.nodeName -- "INPUT") ( 
thisTag.select(); 


return false; 


) 


return true; 


function validBasedOnClass(thisClass) { 


var classBack - ""; 


switch(thisClass) ( 
case "": 
case "invalid": 
break; 
case "reqd": 
if (allGood 8& thisTag.value == "") { 
classBack = "invalid "; 


classBack += thisClass; 
break; 
case "radio": 
if (allGood && !radioPicked(thisTag.name)) { 
classBack = "invalid "; 


classBack += thisClass; 
break; 
case "isNum": 
if (allGood 8& !isNum(thisTag.value)) { 
classBack - "invalid "; 


classBack += thisClass; 
break; 
case "isZip": 
if (allGood 8& !isZip(thisTag.value)) { 
classBack = "invalid "; 


classBack += thisClass; 
break; 
case "email": 
classBack += thisClass; 
break; 
default: 
if (allGood && !crossCheck(thisTag,thisClass)) { 
classBack = "invalid "; 


classBack += thisClass; 


return classBack; 
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function crossCheck(inTag,otherFieldID) { 
if (!document.getElementById(otherFieldID)) { 
return false; 


return (inTag.value !- "" || document.getElementById (otherFieldID).value !- ""); 


function radioPicked(radioName) { 
var radioSet - ""; 


for (var k=0; k«document.forms. length; k++) { 
if (!radioSet) { 
radioSet - document.forms [k][radioName]; 


} 


} 
if (!radioSet) { 
return false; 


} 
for (k=0; k<radioSet.length; k++) { 


if (radioSet[k].checked) { 
return true; 


return false; 


} 
function isNum(passedVal) { 
if (passedVal == "") { 
return false; 
} 
for (var k=0; k<passedVal.length;k++) { 
if (passedVal.charAt(k) < "o") { 
return false; 
} 
if (passedVal.charAt(k) > "9") { 
return false; 
} 
return true; 
} 


function isZip(inZip) { 
if (inZip == "") { 
return true; 


return (isNum(inZip)); 


function invalidLabel(parentTag) { 
if (parentTag.nodeName -- "LABEL") ( 
parentTag.className += " invalid"; 


) 


function doorSet() ( 
if (this.checked) ( 
document.getElementById("twoDoor").checked = true; 
} 
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=> 确保 Zip 编码 是 正确 的 


1. if (allGood 8& !isNum(thisTag.value) ){ 
classBack = "invalid "; 








classBack += thisClass; 


这 些 代 码 放 在 switch/case 条 件 结构 的 isNum 块 中 。 如 果 输 入 的 是 非 数 字 , 那么 isNum() 返 回 false. 


2. if (allGood 8& !isZip(thisTag.value)){ 
classBack - "invalid "; 


这 行 代码 添加 在 switch/case 条 件 结构 的 iszip 块 中 。 如 果 这 个 字段 非 空 而 且 它 不 是 Zip 编码 , 那 
么 iszip() 返 回 false, 


3. if (passedVal == "") { 
return false; 









































在 isNum() PKA, 如 果 passedVal 是 空 的 , 那么 我 们 正在 检查 的 字段 就 不 是 数字 。 当 发 生 这 种 情 
况 时 ， 返 回 false， 表 示 出 现 了 错误 。 
4. for (var k=0; k<passedVal.length; k++) { 
现在 ， 建 立 一 个 循环 ， 每 次 迭代 将 k 计数 器 递增 ， 直 到 passedVal 的 长 度 。 使 用 k 是 因为 目前 我 们 
已 经 处 于 男 两 个 循环 (i Mj) 之 中 。 
5. if (passedVal.charAt(k) < "o") { 
return false; 








} 
if (passedVal.charAt(k) > "9") { 
return false; 


charAt () PABA Dr. k 上 的 字符 。 如 果 这 个 字符 小 于 “0” 或 者 大 于 “9”， 那 么 它 就 不 是 数字 ， 
所 以 要 返回 false， 表示 输入 是 非 数 字 。 

6. return true; 

如 果 到 达 这 行 代 码 ， 就 说 明 输 入 是 数字 ， 所 以 返回 true。 

7. function isZip(inZip) { 


if (inZip == "") { 
return true; 








return (isNum(inZip)); 








在 这 个 表单 中 ，Zip 编码 字段 为 空 是 有 效 的 。 因 此 我 们 先 检查 用 户 是 否 在 这 个 字段 中 输入 了 任何 
内 容 ， 如 果 没 有 ， 就 返回 true 一 一 这 是 有 效 的 输入 。 但 是 ， 如 果 输 入 了 任何 内 容 ， 它 就 必须 是 数字 ， 
所 以 用 isNum() 进 行 检 查 。 

w 提示 

口 如 果 以 后 希望 在 HTML 表 单 中 添加 男 一 个 必须 是 数字 的 新 字段 , 那么 不 需要 编写 新 的 JavaScript 

代码 ， 只 需 使 用 现 有 的 isNum 检 查 。 
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O 请 记 住 ， 网 络 是 全 球 性 的 ， 


么 不 要 要 求 


而 且 





























用 户 输入 Zip 编码 。 美 
| 这些 邮 政 编码 可 能 不 是 数字 。 














6.10 验证 电子 邮件 地 址 


用 户 在 输入 




















用 户 并 非 都 是 美国 人 。 如 果 你 的 站 点 硕 望 吸引 美国 之 外 的 用 户 , 那 
国之 外 的 地 址 可 能 有 邮政 编码 ( postal code )， 也 可 能 没有 ， 


因特网 地 址 方面 可 能 会 遇 到 困难 ,尤其 是 对 于 新 用 户 。 你 可 以 扫描 他 们 输入 的 电子 邮 


件 地 址 并 检查 其 形式 是 否 正确 ， 从 而 帮助 用 户 输 入 正确 的 地 址 。 例 如 ， 可 以 检查 其 中 是 否 只 包含 一 个 


@ 符 号 ， 以 及 是 否 有 无 效 的 字符 ( 见 
A joe@myprovider.com, 但 是 却 输 入 了 joe@yprovider.com， 脚 本 无 法 捕 





























何 检查 地 址 中 的 错误 。 


脚本 6-17 



































Email Address: badaddress@chalcedony/.com 




















电子 邮件 验证 脚本 可 以 捕获 的 一 种 输入 错误 的 例子 














图 6-12 这 是 





通过 扫描 表单 上 电子 | 


window.onload = initForms; 


function initForms() { 
for (var i=0; i« document.forms.length; i++) { 


document. forms[i].onsubmit = validForm; 


} 


funct 


} 


document.getElementById("sunroof").onclick = doorSet; 


ion validForm() { 
var allGood = true; 
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var allTags = document.getElementsByTagName("*"); 


for (var i=0; i<allTags.length; i++) { 
if (!validTag(allTags[i])) { 


allGood = false; 


} 
} 


return allGood; 


function validTag(thisTag) { 


var outClass = ""; 


var allClasses = thisTag.className.split(" "); 


for (var j=0; j<allClasses.length; j++) { 
outClass += validBasedOnClass(allClasses[j]) + " "; 


thisTag.className = outClass; 


if (outClass.indexOf(" 


invalid") > -1) { 


invalidLabel(thisTag.parentNode) ; 


thisTag.focus(); 


if (thisTag.nodeName -- "INPUT") ( 
thisTag.select(); 


) 





图 6-12 )。 当 然 ， 脚 本 无 法 发 现 拼 写 错 误 ， 所 以 如 果 用 
j 获 这 个 错误 。 脚 本 6-17 演示 如 


户 本 打算 输 
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验证 电子 邮件 地 址 
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return false; 


} 


return true; 


function validBasedOnClass(thisClass) { 
var classBack = ""; 


switch(thisClass) { 


case "": 
case "invalid": 
break; 
case "reqd": 
if (allGood 8& thisTag.value == "") { 
classBack = "invalid "; 
} 
classBack += thisClass; 
break; 
case "radio": 


if (allGood && !radioPicked(thisTag.name)) { 
classBack = "invalid "; 


classBack += thisClass; 
break; 
case "isNum": 
if (allGood 8& !isNum(thisTag.value)) { 
classBack - "invalid "; 


classBack += thisClass; 
break; 
case "isZip": 
if (allGood 8& !isZip(thisTag.value)) { 
classBack = "invalid "; 
} 
classBack += thisClass; 
break; 
case "email": 
if (allGood && !validEmail(thisTag.value)) { 
classBack - "invalid "; 


classBack += thisClass; 
break; 
default: 
if (allGood 8& !crossCheck (thisTag,thisClass)) { 
classBack - "invalid "; 


classBack += thisClass; 


} 


return classBack; 


} 


function crossCheck (inTag,otherFieldID) { 
if (!document.getElementById (otherFieldID)) { 
return false; 


return (inTag.value !- "" || document.getElementById (otherFieldID).value != ""); 


) 


function radioPicked(radioName) { 
var radioSet - ""; 


for (var k=0; k«document.forms.length; k++) { 
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if (!radioSet) { 
radioSet = document.forms [k][radioName] 
} 


} 
if (!radioSet) { 
return false; 


for (k=0; k<radioSet.length; k++) { 
if (radioSet[k].checked) { 
return true; 


} 
return false; 
} 
function isNum(passedVal) { 
if (passedVal == "") { 
return false; 
} 


for (var k=0; k<passedVal.length;k++) { 
if (passedVal.charAt(k) < "o") { 
return false; 


if (passedVal.charAt(k) > "9") { 
return false; 


} 
} 
return true; 
j 
function isZip(inzip) ( 
if (inZip == "") { 


return true; 


return (isNum(inZip)); 


function validEmail(email) { 


var invalidChars - " /:,;"; 
if (email == "") { 
return false; 


for (var k=0; k<invalidChars.length; k++) { 
var badChar = invalidChars.charAt(k); 
if (email.indexOf(badChar) > -1) { 
return false; 
} 
} 
var atPos = email. index0f("@",1); 
if (atPos == -1) { 
return false; 


if (email.indexOf("@",atPos+1) !- -1) ( 
return false; 


var periodPos = email.indexOf (".",atPos); 
if (periodPos -- -1) ( 
return false; 


if (periodPos+3 > email.length) ( 


, 
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return false; 


return true; 


function invalidLabel(parentTag) { 
if (parentTag.nodeName -- "LABEL") ( 
parentTag.className += "invalid"; 


} 
} 
} 
} 


function doorSet() { 
if (this.checked) { 
document. getElementById("twoDoor").checked = true; 


} 


=> 验证 电子 邮件 地 址 


1. if (allGood 8& !validEmail(thisTag. value))( 
classBack = "invalid "; 
这 行 代码 添加 在 switch/case 条 件 结构 的 email 块 中 。 如 果 validEmail() PARE [n] false, Wo class 
EA invalid. 
2. var invalidChars = " /:,;"; 
在 validEmail 函数 中 , 创建 变量 invalidChars， 其 中 包含 电子 邮件 地 址 中 最 可 能 出 现 的 5 个 无 效 
字符 : AUR. BAL. Home. CH. 
3. if (email == "") { 
return false; 
这 个 测试 的 意思 是 ,“ 如 果 email 字段 的 内 容 是 空 的， 那么 结果 是 falses” 
4. for (var k=0; k<invalidChars.length; k++) { 
在 这 个 for 语句 中 ， 对 invalidChars 字符 串 中 的 每 个 字符 进行 扫描 。 首 先 将 计数 器 k 初始 化 为 零 ， 
然后 设置 循环 终止 条 件 (k 小 于 字符 串 的 长 度 ) ， 最 后 用 递增 操作 符 ++ 使 k 递增 。 
5. var badChar = invalidChars.charAt(k); 


if (email.indexOf(badChar) > -1) { 
return false; 












































将 badChar 变量 设置 为 invalidChars FER P k 位 置 上 的 无 效 字符 ,然后 检查 电子 邮件 地 址 (email ) 
中 是 否 有 这 个 字符 。 如 果 有 ，index0f() 就 会 返回 找到 这 个 字符 的 位 置 ， 如 果 没 有 ， 它 会 返回 -1。 如 果 
获得 -1 之 外 的 值 ， 就 说 明 找 到 了 一 个 无 效 字符 ， 因 此 返回 false. 

6. var atPos = email.indexOf("Q",1); 


if (atPos == -1) { 
return false; 


























将 atPos 变量 设置 为 @ 符 号 的 位 置 。 脚 本 使 用 indexof 从 地 址 的 第 二 个 字符 开始 检查 第 一 个 @ 符 号 。 如 
果 这 个 @ 符 号 的 位 置 是 -1， 就 意味 着 地 址 中 没有 @ 符 号 ， 因 此 是 错误 的 。 
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7.if (email.indexOf("Q",atPos«1) !- -1) ( 
return false; 





现在 ， 脚 本 检查 第 一 个 @ 符 号 之 后 的 字符 ， 从 而 确保 只 有 一 个 @ 符 号 ， 并 且 拒 绝 任何 包含 多 个 @ 符 号 的 
输入 。 
8. var periodPos = email.indexOf (".",atPos); 


if (periodPos == -1) { 
return false; 



































现在 ， 脚 本 检查 在 @ 符 号 后 面 是 否 有 点 号 。 如 果 没有 ， 就 返回 false. 
9. if (periodPos+3 > email.length) { 
return false; 


return true; 

最 后 ， 脚 本 要 求 在 地 址 中 的 点 号 后 面 至 少 有 两 个 字符 。 如 果 通 过 了 所 有 这 些 检查 ， 而 没有 发 现 错 

iR, 那么 validEmail 函数 的 值 就 是 true， 这 意味 着 电子 邮件 地 址 是 有 效 的 。 

V 提示 

O 电子 邮件 地 址 验证 和 确认 之 间 有 一 点 区 别 。 这 个 脚本 只 是 验证 电子 邮件 地 址 ,确保 用 户 输入 的 
内 容 符 合 电子 邮件 地 址 的 正确 形式 。 但 是 , 它 无 法 确认 这 个 地 址 确实 存在 。 进 行 确认 的 唯一 方 
法 是 向 这 个 地 址 发 送 一 封 电 子 邮 件 ， 并 检查 是 否 有 回复 。 但 是 , 这 种 做 法 不 太 好 ， 因 为 如 果 发 
送 确认 邮件 ,可 能 会 引起 用 户 的 反感 ,而 且 邮 件 可 能 要 过 好 几 个 小 时 才能 得 到 回复 , 而 在 此 期 
间 用 户 不 会 有 耐心 一 直 在 表单 上 等 待 。 

口 这 个 脚本 并 未 捕捉 所 有 电子 邮件 地 址 错误 ， 而 是 仅 捕 提 最 常见 的 错误 。 对 所 有 电子 邮件 地 址 
错误 进行 全 面 检查 需要 好 几 页 代码 。 如 果 你 仔细 研究 一 番 ， 可 能 能 够 捕捉 这 个 脚本 未 考虑 到 
的 错误 。 
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则 表达 式 是 一 种 对 文本 字符 串 进行 验证 和 格式 化 的 极其 强大 的 方式 。 通过 使 用 正则 表达 式 ， 
可 以 用 一 两 行 JavaScript 代码 完成 原本 需要 几 十 行 代码 的 复杂 任务 。 
正则 表达 式 (regular expression， 常 常 缩写 为 RegExp ) 是 一 种 用 特殊 符号 编写 的 模式 ， 描 述 一 个 
或 多 个 文本 字符 串 。 使 用 正则 表达 式 匹 配 文本 的 模式 ， 这 样 脚本 就 可 以 轻松 地 识别 和 操纵 文本 。 与 算 
术 表达 式 一 样 , 创建 正则 表达 式 也 要 使 用 操作 符 , 但 是 在 这 种 情况 下 使 用 的 是 操作 文本 ( 而 不 是 数字 ) 
的 操作 符 。 有 许多 正则 表达 式 操作 符 ， 我 们 在 本 章 中 将 讨论 最 常用 的 一 些 操作 符 。 通 过 学 习 和 使 用 这 
些 操 作 符 ， 在 需要 搜索 和 操纵 文本 字符 串 时 ， 就 能 够 节省 大 量 时 间 和 精力 。 
正则 表达 式 也 常常 被 认为 是 编程 中 最 环 手 的 部 分 之 一 。 你 可 能 觉得 已 经 很 好 地 掌握 了 JavaScript, 
但 是 突然 遇 到 了 一 个 包含 正则 表达 式 的 脚本 ， 这 可 能 使 你 完全 无 法 理解 脚本 的 作用 。 如 果 你 不 了 解 正 
则 表达 式 的 语法 ， 那 么 根本 猜 不 出 会 发 生 什么 情况 。“ 这 一 大 堆 乱 七 八 糟 的 字符 是 什么 意思 ? C 
但 是 ， 只 要 把 混乱 的 正则 表达 式 分 解 成 有 意义 的 小 块 ， 其 语法 并 不 难 理解 。 在 本 章 中 ,我 们 将 讲 
解 正则 表达 式 语 法 ， 并 讨论 如 何 使 用 正则 表达 式 使 代码 更 简洁 、 更 强大 。 




































































你 想 暂时 回避 正则 表达 式 吗 
如 果 这 是 你 第 一 次 面 对 正 则 表达 式 ， 你 现在 很 可 能 觉得 压力 很 大 。 我们 把 这 一 章 放 在 这 里 ， 是 
因为 使 用 正则 表达 式 验证 表单 输入 是 非常 有 意义 的 。 但 是 本 书 中 的 其 余 内 容 并 不 依赖 于 本 章 ， 所 以 
如 果 你 想 跳 到 下 一 章 ， 直 到 具备 更 丰富 的 脚本 编程 经 验 之 后 再 来 学 习 本 章 ， 也 是 可 以 的 。 
另 一 方面 ， 正 则 表达 式 是 值得 花 时 间 学 习 的 。 正 则 表达 式 不 仅 在 JavaScript 中 有 用 ， 在 其 他 许 
多 地 方 也 可 以 使 用 正则 表达 式 ， 例 如 其 他 编程 语言 ( 比如 Perl, Java, Python 和 PHP ), Apache 配 


置 文件 以 及 BBEdit 和 TextMate 等 文本 编辑 器 。 其 至 Adobe Dreamweaver 和 Microsoft Word ( 在 一 
定 程度 上 ) 使 用 正则 表达 式 也 可 以 实现 更 强大 的 搜索 和 替换 。 


7.1 用 正则 表达 式 验证 电子 邮件 地 址 


在 第 6 章 中 , 有 一 个 对 电子 邮件 地 址 进行 验证 的 示例 。 完 成 这 个 任务 所 需 的 脚本 相当 长 。 脚 本 7-3 
的 作用 在 本 质 上 与 脚本 6-17 相同 , 但 是 通过 使 用 正则 表达 式 , 脚本 的 代码 少 多 了 , 而且 可 以 得 到 更 严 
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格 的 结果 。HTML 见 脚本 7-1, CSS 见 脚本 7-2。 


脚本 7-1 电子 邮件 验证 示例 的 HTML 


<!DOCTYPE html> 
<html> 
<head> 
<title>Email Validation</title> 
<link rel="stylesheet" href="script01.css"> 
«script src="script01.js"></script> 
</head> 
<body> 
<h2 class="centered">Email Validation </h2> 
«form action="someAction.cgi"> 
<p><label>Email Address: 
<input class="email" type="text" size="50"></label></p> 
<p><input type="reset">&nbsp;<input type="submit" value="Submit"></p> 
</form> 
</body> 
</html> 


脚本 7-2 ix Be CSS 是 本 章 刚 开始 的 几 个 任务 所 需要 的 


body { 
color: #000; 
background-color: #FFF; 








} 


input.invalid { 
background-color: #FF9; 
border: 2px red inset; 


} 


label.invalid { 
color: #F00; 
font-weight: bold; 
} 


.centered { 
text-align: center; 
} 


脚本 7-3 — A JL4T JavaScript 就 完成 了 验证 电子 邮件 地 址 的 复杂 任务 


window.onload = initForms; 


function initForms() { 
for (var i=0; i« document.forms.length;i++) { 
document. forms[i].onsubmit = validForm; 
} 
} 


function validForm() { 
var allGood = true; 
var allTags = document.getElementsByTagName("*") ; 


for (var i=0; i«allTags.length; i++) { 
if (!validTag(allTags[i])) { 
allGood = false; 
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} 


return allGood; 


function validTag(thisTag) { 
var outClass = ""; 
var allClasses = thisTag.className.split(" "); 


for (var j=0; j<allClasses.length; j++) { 
outClass += validBasedOnClass (allClasses[j]) + " "; 


} 


thisTag.className = outClass; 


if (outClass.indexOf("invalid") > -1) { 
invalidLabel(thisTag.parentNode); 
thisTag.focus(); 
if (thisTag.nodeName -- "INPUT") ( 
thisTag.select(); 


return false; 


) 


return true; 





function validBasedOnClass(thisClass) { 
var classBack - ""; 


switch(thisClass) ( 
case "": 
case "invalid": 
break; 
case "email": 
if (allGood 8& !validEmail (thisTag.value)) classBack - "invalid "; 


default: 
classBack += thisClass; 
} 


return classBack; 


} 


function validEmail(email) { 
var re = /*\w+([\.-]?\w+)*@\w+ ([\.-]?\w+)*(\. \w{2, 3})+$/; 


return re.test(email); 


function invalidLabel(parentTag) { 
if (parentTag.nodeName -- "LABEL") ( 
parentTag.className += " invalid"; 


) 
) 
) 
> 使 用 正则 表达 式 验证 电子 邮件 地 址 


l.var re = /*\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\. \w{2, 3})+$/; 

天 哪 ! 这 到 底 是 什么 ? 别 担心 ， 这 只 是 validEmail() 函 数 中 的 一 个 正则 表达 式 。 我 们 将 它 分 解 开 
并 逐 段 讲解 。 与 任何 JavaScript 代码 一 样 ， 正 则 表达 式 也 要 从 左 向 右 读 。 
首先 , re 仅仅 是 一 个 变量 。 我 们 将 它 命 名 为 re, 这 样 在 以 后 使 用 它 时 就 容易 想起 它 是 一 个 正则 表 
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达 式 。 这 行 代码 将 re 的 值 设 置 为 等 号 右边 的 正则 表达 式 。 

正则 表达 式 总 是 以 斜 杠 (/) 开 头 和 结尾 ( 当然 ,仍然 有 一 个 分 号 ， 表 示 JavaScript 代码 行 结束 ， 但 
分 号 不 是 正则 表达 式 的 一 部 分 )。 斜 杠 之 间 的 所 有 内 容 都 是 正则 表达 式 的 组 成 部 分 。 

MFI O) 表示 我 们 要 使 用 这 个 表达 式 检查 以 特定 的 字符 串 开头 的 字符 串 。 如 果 去 掉 脱 字符 ， 
那么 即使 字符 串 开 头 有 一 堆 “ 垃 圾 字符 ”"， 电 子 邮 件 地 址 也 可 能 被 认为 是 有 效 的 。 
表达 式 \w 表示 任意 单一 字符 ,包括 a~z、A ~Z、0 ~9 或 下 划 线 。 电 子 邮件 地 址 必须 以 这 些 字符 
之 一 开头 。 

加 号 + 表示 我 们 要 寻找 前 面条 目的 一 次 或 多 次 出 现 。 在 这 个 示例 中 , 电子 邮件 地 址 必须 以 字符 a ~ 
z、A ~Z、0~9 或 下 划 线 的 任意 组 合 开 头 。 

左 圆 括号 (表示 一 个 组 。 这 意味 着 后 面 将 要 引用 圆 括号 中 的 所 有 内 容 ， 所 以 现在 将 它们 放 在 一 个 
组 中 。 

方 括号 [] 用 来 表示 可 以 出 现在 其 中 的 任意 一 个 字符 。 在 这 个 示例 中 ， 方 括 导 内 包含 字符 \.-。 我 
们 希望 允许 用 户 输 入 点 号 或 连 字 符 ， 但 是 点 号 对 于 正则 表达 式 有 特殊 意义 ， 所 以 需要 在 它 前 面 加 上 反 
斜 杠 \， 这 表示 我 们 指 的 实际 上 是 点 号 本 身 ， 而 不 是 它 的 特殊 意义 。 在 特殊 字符 前 面 使 用 反 斜 杠 称 为 
“对 字符 转 义 ”"。 因 为 有 方 括号 ,输入 的 字符 串 在 这 个 位 置 可 以 有 一 个 点 号 或 一 个 连 字 符 , 但 是 两 者 不 
能 同时 存在 。 注 意 ， 连 字符 不 代表 任何 特殊 字符 ， 所 以 不 用 加 反 和 斜 杠 。 

问号 ?表示 前 面 的 条 目 可 以 不 出 现 或 者 出 现 一 次 。 所 以 ,在 电子 邮件 地 址 的 第 一 部 分 (在 6 前面 的 
部 分 ) 中 可 以 有 一 个 点 号 或 一 个 连 字 符 ， 也 可 以 没有 。 

在 ?后 面 ， 再 次 使 用 \w+， 这 表示 点 号 或 连 字符 后 面 必 须 有 其 他 一 些 字符 。 

右 圆 括号 ) 表 示 这 个 组 结束 了 。 在 此 之 后 是 一 个 星 号 ， 表 示 前 面 的 条 目 〈 在 这 个 示例 中 ， 指 圆 括 
号 中 的 所 有 内 容 ) 可 以 不 出 现 或 者 出 现 多 次 。 所 以 如 果 dori 是 有 效 的 电子 邮件 前 缀 ,testing-testing-1-2-3 
也 是 。 

@ 字 符 仅 仅 代表 它 本 身 ， 没 有 任何 其 他 意义 ， 这 个 字符 位 于 电子 邮件 地 址 前 级 和 域名 之 间 。 

再 次 使 用 \w+， 这 表示 域名 必须 以 一 个 或 多 个 a~z、A ~Z、0 ~9 或 下 划 线 字符 开头 。 在 此 之 后 同 
样 是 ([\.-]?\w+)*， 表示 电 子 邮件 地 址 的 后 级 中 允许 有 点 号 或 连 字 符 。 

然后 ,在 一 对 圆 括 号 中 建立 男 一 个 组 :\.\w{2,3}， 表示 我 们 希望 找到 一 个 点 号 , 后 面 跟着 一 些 字 
符 。 在 这 个 示例 中 ， 花 括号 中 的 数字 表示 前 面 的 条 目 ( 本 例 中 是 \w， 表 示 字 母 、 数 字 或 下 划 线 ) 可 以 
出 现 2 次 或 3 次 。 在 这 个 组 的 右 圆 括号 后 面 是 一 个 +， 也 表示 前 面 的 条 目 (这 个 组 ) 必须 出 现 一 次 或 
多 次 。 这 会 匹配 .com 或 .edu 之 类 的 ， 也 与 ox.ac.uk 匹配 。 

最 后 ， 正 则 表达 式 的 末尾 是 一 个 美元 符号 $， 表 示 匹 配 的 字符 串 必须 在 这 里 结束 。 这 使 脚本 能 够 
拒绝 那些 开头 正确 , 但 是 在 末尾 包含 垃圾 字符 的 电子 邮件 地 址 。 斜 杠 结束 正则 表达 式 。 分 号 和 原来 
样 结束 JavaScript 语句 。 

2. return re.test(email); 

这 一 行 获得 前 一 步 中 定义 的 正则 表达 式 ， 并 使 用 test() 方 法 验证 电子 邮件 地 址 的 有 效 性 。 如 果 输 
入 的 字符 串 不 符合 re 中 存储 的 模式 ，test() 就 返回 false， 错 误 的 字段 及 其 标签 变 成 红色 的 粗 体 ， 如 
图 7-1 所 示 。 如 果 输 入 有 效 , 就 返回 true ( 见 图 7-2 ), 表 单 将 电子 邮件 地 址 提交 给 一 个 CGI 程序 ( someA- 
ction.cgi ) 进行 进一步 处 理 。 
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File Edit View History Bookmarks Tools Help Eile Edit View History Bookmarks Tools Help 
eG - e fiy 【四 htp//didropb v; -| |*8)- Goog P| [es] OÐ- e A httpyrdldropb c7 ~| |$- Goog 2) fan 
Email Validation Email Validation 
Email Address: [lss@@javascripworld com| Email Address: pixelthecat@pixel. mu 
Reset [ Submit ] | Reset | Submit J 
Done d Done - d 
图 7-1. 这 是 用 户 输入 无 效 电子 邮件 地 址 的 图 7-2 这 个 地 址 是 有 效 的 
结果 ， 标 签 和 字段 变 成 红色 、 粗 体 
vV 提示 


O 这 段 代 码 并 没有 匹配 每 一 种 合法 的 电子 邮件 地 址 形式 ， 仅 仅 匹 配 你 最 想 让 用 户 输入 的 形式 。 

口 注意 ， 在 脚本 7-3 中 为 re 赋值 之 后 ， 在 步骤 2 中 将 re 作为 对 象 使 用 。 与 其 他 JavaScript 变量 

一 样 ， 正 则 表达 式 的 结果 可 以 是 一 个 对 象 。 

O 请 比较 脚本 6-17 和 脚本 7-3 中 的 validEmail() 函 数 。 前 者 有 27 行 ， 而 后 者 只 有 4 行 。 它 们 的 作用 

是 相同 的 ， 由 此 可 以 看 出 正则 表达 式 确 实 可 以 减少 大 量 代 码 。 

O 在 脚本 7-1 中 ，someAction.cgi 只 是 一 个 CGI 程序 的 示例 名 称 〈 其 字面 意思 是 “ 某 种 操作 ”)， 它 
可 以 执行 你 需要 的 任何 操作 。 如 果 你 想 学 习 编 写 CGI， 我 们 推荐 Elizabeth Castro 的 书 Per and 
CGI for the World Wide Web, Second Edition: Visual QuickStart Guide ; 

O 在 表 7-1 中 会 看 到 正则 表达 式 中 的 特殊 字符 ( 有 时 候 称 为 元 字符 ，meta character) 是 区 分 大 小 

写 的 。 在 对 使 用 正则 表达 式 的 脚本 进行 调试 时 要 记 住 这 一 点 。 

口 在 正则 表达 式 中 ， 有 一 些 字符 可 以 改变 其 他 操作 符 的 行为 ， 见 表 7-2。 







































































表 7-1 正则 表达 式 中 的 特殊 字符 







































































字 8 a E 
\ 在 字面 意义 和 特殊 意义 之 间 进 行 切换 。 例 如 \w 表示 \w 的 特殊 意义 ( 见 下 面 的 解释 ) 而 不 是 字面 值 
w， 但 是 \$ 表 示 不 使 用 $ 的 特殊 意义 ( 见 下 面 的 解释 ) 而 是 使 用 $ 字 符 本 身 
i 字符 串 的 开头 
$ 字符 串 的 结尾 
+ 一 次 或 多 次 
? 零 次 或 一 次 
除 换行 符 外 的 任何 字符 
\b 单词 边界 
\B 非 单词 边界 
\d 0~9 的 任何 数字 (与 [0-9] 相 同 ) 
\D 任何 非 数字 
\f 换 页 符 (form feed ) 
An 换行 符 
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( 续 ) 
字 FF 匹配 
\r 回 车 符 
\s 任何 一 个 空白 字符 (与 [\f\n\r\t\v] 相 同 ) 
\s 任何 一 个 非 空白 字符 
\t 制 表 符 
\v 垂直 制 表 符 
\w 任何 字母 、 数 字 以 及 下 划 线 ( 5 [a-zA-Zo-9 Hisl ) 
\W 除数 字 、 字 母 及 下 划 线 外 的 其 他 字符 
\xnn 十 六 进 制 数字 nn 定义 的 ASCII 字符 
\onn 八进制 数字 nn 定义 的 ASCI 字符 
\cX 控制 字符 X 
[abcde] 与 其 中 任何 字符 匹配 的 字符 集 
[^abcde] 字符 补 集 ， 与 其 中 任何 字符 都 不 匹配 的 字符 集 
[a-e] 与 其 中 的 字符 范围 匹配 的 字符 集 
[\b] 退 格 字符 的 字面 意义 (不同 于 \b ) 
{n} 前 面 的 字符 正好 出 现 n 次 
{n,} 前 面 的 字符 至 少 出 现 n 次 
{n,m} 前 面 的 字符 出 现 n~m 次 
() 一 个 组 ， 可 以 在 后 面 引 用 它 
x|y x 或 y 


表 7-2 正则 表达 式 修饰 符 








修饰 符 $ X 
8 搜索 所 有 的 匹配 ( 全 局 ) ， 不 只 是 第 一 处 匹配 
i 进行 不 区 分 大 小 写 的 搜索 











7.2 验证 文件 名 


可 以 用 正则 表达 式 做 许多 事情 , 但 是 最 有 用 的 功能 之 一 是 验证 网 页 上 表单 中 的 输入 字段 ,脚本 7-4 
希望 用 户 输入 一 个 图 像 的 有 效 URL, 正则 表达 式 有 助 于 确保 用 户 的 输入 符合 要 求 ( 具体 地 说 , 文件 名 
必须 有 表示 图 像 文件 的 后 级 )。 图 7-3 显示 当 意 外 输入 无 效 的 URL 时 页 面 的 效果 ， 图 7-4 显示 输入 正 
的 图 像 名 称 时 的 效果 。 
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图 7-3 由 于 使 用 了 正则 表达 式 , 如果 用 户 输入 的 不 是 图 7-4 如果 输入 了 正确 的 图 像 文件 名 ， 就 在 
有 效 的 图 像 文件 名 ， 页 面 就 会 指出 这 个 错误 页 面 上 显示 这 个 图 像 


脚本 7-4 这 个 脚本 要 求 用 户 输入 图 像 位 置 ， 如 果 URL 通过 了 验证 ， 就 在 页 面 上 显示 这 个 图 像 


window.onload = initForms; 





function initForms() { 
for (var i=0; i« document.forms.length;i++) { 
document. forms[i].onsubmit = validForm; 
} 
} 


function validForm() { 
var allGood = true; 
var allTags = document.getElementsByTagName("*") ; 


for (var i=0; i«allTags.length; i++) { 
if (!validTag(allTags[i])) { 
allGood = false; 
} 


} 


return false; 


function validTag(thisTag) { 
var outClass = ""; 
var allClasses = thisTag.className.split(" "); 


for (var j=0; j<allClasses.length;j++) { 
outClass += validBasedOnClass (allClasses[j]) + " "; 
} 


thisTag.className = outClass; 


if (outClass.indexOf("invalid") > -1) { 
invalidLabel (thisTag.parentNode) ; 
thisTag.focus(); 
if (thisTag.nodeName == "INPUT") { 
thisTag.select(); 
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return false; 


return true; 
function validBasedOnClass(thisClass) { 
var classBack = ""; 


switch(thisClass) { 


case "" 
case "invalid": 


break; 
case "imgURL": 
if (allGood && !imgURL (thisTag.value)) classBack = "invalid 


default: 
classBack += thisClass; 


} 


return classBack; 
function imgURL(newURL) { 
var re = /*(file|http):\/\/\S+\/\S+\. (gif| jpg |png)$/i; 


if (re.test(newURL)) { 
document.getElementById ("chgImg").src = newURL 


return true; 


return false; 


function invalidLabel(parentTag) { 


if (parentTag.nodeName -- "LABEL") ( 
= " invalid"; 


parentTag.className += 








} 
} 
} 
} 
> 验证 URL 
QO var re = /*(file|http):\/\/\S+\/\S+\. (gif | jpg/png)$/i; 
示例 一 样 ， 我 们 希望 检查 输入 的 整个 字段 ， 所 以 正则 表达 


这 行 代码 在 imgURL() 函 数 中 。 与 前 一 个 
式 以 /^ 开 头 ， 以 $/ 结 束 。 输 入 可 以 以 文本 http 或 file 开头 ， 所 以 将 这 两 个 字符 串 放 在 一 个 组 中 ,用 | 分 
无 论 用 户 是 从 本 地 硬盘 还 是 从 Web 获得 图 像 ，:// 几 个 字符 都 是 必需 的 ， 
, 每 个 正和 斜 杠 必须 分 别 进行 转 义 ( 这 里 的 两 处 \/ 都 是 转 义 后 的 正 斜 杠 )， 


i 是 一 个 或 多 个 非 空 格 字 符 。 然 后 需要 














Ma, 表示 可 以 接受 两 者 之 一 。 
所 以 接 下 来 检查 这 些 字符 ,注意 
因为 正 斜 杠 是 正则 表达 式 特 殊 字符 。 
在 此 之 后 ， 几 乎 可 以 出 现任 何 字 符 ， 所 以 使 用 \s+ 表 示 后 音 

斜 杠 ( 同样 经 过 转 义 ) 来 分 隔 域 名 和 文件 名 ， 然 后 是 男 一 个 \S+ 用 来 处 理 文件 名 。 
文件 名 需要 以 点 号 和 gif, jpg 和 png 结束 。 点 号 经 过 转 义 ， 两 个 后 绥 组 合 在 一 起 ， 表 示 接 受 其 中 



























































另 一 个 正 
之 一 。 
在 这 个 正则 表达 式 后 面 ， 使 用 修饰 符 i 允许 用 户 输入 大 写 或 小 写字 母 。 这 个 修饰 符 让 正则 表达 式 


不 区 分 大 小 写 。 
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7.3 ”提取 字符 串 

字符 串 验 证 并 不 是 使 用 正则 表达 式 能 够 完成 的 唯一 任务 。 字符 串 提取 (extraction) 也 是 有 意义 的 。 
可 以 提取 并 操作 字符 串 的 一 部 分 ， 这 样 就 可 以 对 最 终结 果 进 行 更 细 的 控制 。 在 脚本 7-5 中 ， 我 们 获得 
一 系列 输入 的 姓名 ， 其 中 名 字 在 前 ， 姓 氏 在 后 ， 然 后 交换 名 和 姓 的 次 序 。 
脚本 7-5 这 个 脚本 重新 安排 输入 的 姓名 列表 


window.onload = initForms; 

















function initForms() { 
for (var i=0; i< document.forms.length;i++) { 
document. forms[i].onsubmit = validForm; 


function validForm() { 
var allTags = document.getElementsByTagName("*") ; 


for (var i=0; i«allTags.length; i++) { 
validTag(allTags[it); 


return false; 


function validTag(thisTag) { 
var allClasses = thisTag.className.split(" "); 


for (var j=0; j<allClasses.length; j++) { 
validBasedonClass(allclasses[j]) 


3 


function validBasedOnClass(thisClass) { 
switch(thisClass) { 
case "": 
break; 
case "namelist": 
thisTag.value - namelist (thisTag.value); 
default: 


} 

function nameList(inNameList) { 
var newNames = new Array; 
var newNameField = ""; 


var re = /\s*\n\s*/; 
var nameList = inNameList.split(re); 


re = /(\S+)\s(\S+)/; 


for (var k=0; k<nameList.length;k++) { 
newNames[k] = nameList[k].replace(re, "$2, $1"); 


for (k=0; k<newNames.length; k++) { 
newNameField += newNames[k] + "\n"; 


return newNameField; 
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l. var re = /\s*\n\s*/; 

这 是 一 个 新 的 正则 表达 式 ， 它 搜索 的 文本 模式 是 按照 任何 空 
空白 字符 (\s* ) 的 顺序 组 成 的 。 
2. var nameList = inNamelist.split(re); 
字符 串 方 法 split() 获 得 正则 表达 式 ， 并 且 将 它 应 用 于 用 户 输入 的 存储 在 inNameList 中 的 数据 


( 见 图 7-5 )。 每 个 换行 符 分 隔 一 个 姓名 ，split() 将 每 行 上 的 输入 数据 分 隔 开 。 结 果 是 一 个 输入 的 姓名 
的 字符 串 数 组 ， 其 中 每 个 数组 元 素 都 是 一 个 姓名 ， 存 储 在 数组 nameList 中 。 

















白字 符 (\s* ) 、 换 行 符 ( \n ) 和 任何 















































() Name List Reversal - Mozilla Firefox DENN Leks 


File Edit View History Bookmarks Tools Help 


G -Ce A htpydld 立 -| > Goo) [s] 





Reverse a list of names 


Enter a list of names with first name first, one per line: 
aia 








Reset Jí Submit 








Done 








图 7-5 这 是 转换 前 的 列表 
3. re = /(\S+)\s(\S+)/3 
接 下 来 ， 需 要 另 一 个 正则 表达 式 ， 它 可 以 将 每 个 姓名 分 隔 成 名 字 和 姓氏 。 它 搜索 的 是 任何 非 空白 


FIT OS) ， 然 后 是 一 个 空白 字符 〈\s ) ， 最 后 是 任何 非 空白 字符 〈\S+ ) 。 每 组 非 空白 字符 需要 加 
上 圆 括号 ， 以 便 在 后 面 引 用 这 些 字符 。 























4. for (var k=0; k«namelist.length; k++) { 
对 于 naneList 数组 中 的 每 个 姓名 ， 循 环 执行 以 下 代码 。 


5. newNames[k] = nameList[k].replace (re, "$2, $1"); 


记得 步骤 3 中 的 圆 括号 吗 ? 当 执 行 replace() 方 法 时 , 正则 表达 式 re 将 nameList 的 数组 元 素 分 隔 
成 名 字 和 姓氏 。 这 些 圆 括号 让 JavaScript 将 名 字 存 储 在 正则 表达 式 属性 $1 中 ， 将 姓氏 存储 在 正则 表达 
式 属性 $2 中 。 然 后 ，replace() 方 法 使 用 传递 给 它 的 第 二 个 参数 ， 返 回 新 的 字符 串 : 首先 是 姓氏 $2， 
然后 是 一 个 逗号 ， 最 后 是 名 字 $1。 现 在 ， 将 姓氏 在 前 的 姓名 存储 在 新 数组 newNames 中 。 
6. for (k=0; k«newNames.length; k++) { 
newNameField += newNames[k] + "\n"; 


























这 个 循环 设置 一 个 新 变量 newNameField, 它 将 包含 转换 后 的 用 户 输入 文本 。 对 于 newNames 数组 中 
的 每 个 姓名 ， 将 姓名 追加 进 newNameField， 再 加 上 一 个 换行 符 。 
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7. return newNameField; 
我 们 返回 结果 来 更 新 网 页 。 更 新 在 switch/case 部 分 : thisTag.value = namelist(thisTag.value);. 
结果 见 图 7-6。 
v 提示 
口 这 个 脚本 只 处 理由 空格 分 隔 的 名 字 和 姓氏 。 如 果 和 希望 处 理 中 间 名 或 者 由 多 部 分 组 成 的 姓氏 , 就 
必须 修改 脚本 。 
口 在 这 个 脚本 中 , 在 不 同 的 位 置 多 次 使 用 了 变量 re， 并 给 它 赋 以 不 同 的 值 。 这 在 JavaScript 中 是 
允许 的 〈 我 们 在 这 里 这 人 么 做 就 是 为 了 演示 这 一 点 )， 但 是 也 可 以 考虑 在 自己 的 脚本 中 使 用 不 同 
的 变量 名 。 在 以 后 调试 或 修改 脚本 时 ， 这 会 使 工作 更 轻松 。 
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[ Reset | (Submit) 








Done - d 








图 7-6 改变 姓名 次 序 后 的 页 面 
7.4 格式 化 字符 串 


用 户 常 常 以 很 随意 的 格式 输入 数据 。 如 果 你 希望 输入 符合 一 种 标准 格式 ,那么 最 好 自己 处 理 格式 
化 。 脚 本 7-6 演示 了 如 何 获得 一 系列 姓名 并 且 将 它们 转换 为 标准 的 首 字 母 大 写 格式 。 


脚本 7-6 这 个 脚本 获得 以 任何 格式 输入 的 姓名 ， 并且 将 它们 转换 为 首 字母 大 写 格式 
window.onload = initForms; 


function initForms() { 
for (var i=0; i« document.forms.length; i++) { 
document. forms[i].onsubmit = validForm; 
} 
} 


function validForm() { 
var allTags = document.getElementsByTagName("*") ; 


for (var i=0; i«allTags.length; i++) { 
validTag(allTags[i]); 
return false; 


function validTag(thisTag) { 
var allClasses = thisTag.className.split(" "); 
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for (var j=0; j<allClasses.length; j++) { 
validBasedOnClass(allClasses[j]); 


} 


function validBasedOnClass(thisClass) { 


switch(thisClass) { 
case "": 
break; 

case "nameList": 


thisTag.value = nameList(thisTag.value) ; 


default: 


} 


function nameList(inNameList) { 


var newNames = new Array; 
var newNameField = ""; 
var re = /\s*\n\s*/; 


var nameList = inNamelist.split(re); 
re = /*(\S)(\S+)\s(\S) (\S+)$/; 
for (var k=0; k<nameList.length;k++) { 


if (nameList[k]) { 


re.exec(nameList[k]); 


newNames[k] = RegExp. 


$1. toUpperCase() + RegExp.$2.toLowerCase() + 


—>+ RegExp. $4. toLowerCase(); 


} 


for (k=0; k«newNames.length; k++) { 
newNameField += newNames[k] + "An"; 


return newNameField; 
} 
} 
} 


> PET HL 


+ RegExp.$3.toUpperCase() 








1. re = /*(\S)(\S+)\s(\S) (\S+) $73 





这 个 正则 表达 式 同 样 寻找 符合 “名 字 、 空 格 、 妈 
名 字 的 首 字母 ^(\S)、 名 字 的 剩余 字母 (\S+) 、 妈 

















和 $ 迫 使 字符 串 在 这 两 个 位 置 开 始 和 结束 ， 因 为 我 们 不 希望 漏 掉 任 何 东 西 。 
2. for (var k=0; k<nameList.length; k++) { 
我 们 希望 检查 namelist 数组 中 的 每 个 姓名 ， 见 图 7-7. 





3. re.exec(nameList[k]); 


这 个 步骤 使 用 exec() 方 法 在 字符 日 























P nameList[k] 上 执行 正则 表达 式 re， 从 而 将 字符 


E 氏 ”次 序 的 姓名 ,并 且 将 每 个 姓名 分 隔 成 4 部 分 : 
E 氏 的 首 字母 (\5) 以 及 姓氏 的 剩余 字母 (\S+)$。 注 意 ，^ 


申 分 隔 为 4 个 





部 分 , 并 且 自 动 地 设置 JavaScript 内 置 的 RegExp 对 象 。 这 4 个 部 分 分 别 存储 在 RegExp.$1、RegExp.$2、 


RegExp.$3 和 RegExp.$4 中 。 


4. newNames[k] = RegExp.$1.toUpperCase()+ RegExp.$2.toLowerCase() + 


—toUpperCase()* RegExp.$4.toLowerCase(); 
转换 后 的 姓名 存储 在 newNames 数组 中 。 它 包含 转换 为 大 写 的 名 字 首 字母 CRegExp.$1) ， 转 换 为 


+ RegExp.$3. 
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小 写 的 名 字 剩 余 字 母 ( RegExp.$2 ) ,然后 是 一 个 空格 , 然后 是 转换 为 大 写 的 姓氏 首 字母 CRegExp.$3) , 
最 后 是 转换 为 小 写 的 姓氏 剩余 字母 (RegExp.$4) 。 然 后 显示 姓名 ， 见 图 7-8。 
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Capitalize a list of names Capitalize a list of names 


Enter a list of names with first name first, one per line: 


Ralph Spoilsport 
Bettyjo Bialovsky 









































[Reset] Submit ] (Reset | [ Submit | 
图 7-7 这 是 转换 之 前 的 姓名 图 7-8 ”这 是 转换 后 的 效果 , 已 经 符合 我 们 的 要 求 了 
7 
关于 RegExp 对 象 





JavaScript 有 一 个 内 置 的 RegExp 对 象 ， 每 当 脚 本 执行 正则 表达 式 方法 (IA 7-4 和 表 7-5 ) 时 ， 
会 自动 地 设置 (和 重新 设置 ) 这 个 对 象 。 这 个 对 象 的 属性 见 表 7-3， 它 的 方法 见 表 7-4, RegExp 对 象 
并 不 是 一 个 包含 正则 表达 式 操 作 结 果 的 变量 ， 而 是 包含 正则 表达 式 所 描述 的 模式 ， 脚 本 可 以 通过 
RegExp 对 象 的 属性 和 方法 访问 文本 模式 的 各 个 部 分 。 


表 7-3 RegExp 对 象 的 属性 
























































m tt EN 

$1 (到 $9 ) 圆 括号 包围 的 子 字 符 串 匹配 

$_ 相当 于 input 

$* 相当 于 multiline 

$& 相当 于 lastMatch 

$+ 相当 于 lastParen 

$ 相当 于 leftContext 

$' 相当 于 rightContext 

constructor 指定 创建 对 象 原型 的 函数 

global 全 局 搜索 (使 用 g 修饰 符 ) 
ignoreCase 不 区 分 大 小 写 搜索 (使 用 i 修饰 符 ) 
input 如 果 没 有 传递 字符 串 ， 这 就 是 要 搜索 的 字符 串 
lastIndex 继续 匹配 的 起 始 位 置 

lastMatch 最 后 一 个 匹配 的 字符 串 








lastParen 最 后 的 圆 括号 包围 的 子 字符 串 匹配 
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( 续 ) 
m tt a xX 
leftContext 最 近 一 个 匹配 字符 串 左 边 的 子 字 符 串 
multiline 是 否 跨 多 行 搜索 字符 串 
prototype 允许 在 所 有 对 象 中 添加 属性 
rightContext 最 近 一 个 匹配 字符 串 右 边 的 子 字 符 串 





source 正则 表达 式 模 式 本 身 


表 7-4 RegExp 对 象 的 方法 










































































5 ”法 E X 
compile(pattern,[, "g" | "i" | "gi"]) 对 正则 表达 式 进 行 编译 
exec(string) 搜索 匹配 
test(string) 测试 匹配 
toSource() 返回 一 个 代表 对 象 的 字面 值 
toString() 返回 一 个 代表 指定 对 象 的 字符 串 
valueOf() 返回 指定 对 象 的 原始 值 

表 7-5 字符 串 方 法 
A 3X E x 
match(re) 在 一 个 字符 串 中 寻找 与 一 个 正则 表达 式 模式 〈ze ) 的 匹配 
replace(re, replaceStr) 使 用 正则 表达 式 ( re ) 执行 所 需 的 替换 
search(re) 搜索 与 正则 表达 式 ( re ) 的 匹配 
split(re) 根据 正则 表达 式 ( re ) 对 字符 串 进行 分 隔 

















7.5 对 字符 串 进行 格式 化 和 排序 


另 一 种 典型 任务 是 对 一 组 姓名 进行 排序 。 脚 本 7-7 将 前 两 个 示例 组 合 起 来 并 且 添加 了 排序 功能 。 
最 终结 果 是 一 个 姓氏 在 前 的 姓名 列表 ， 采 用 首 字母 大 写 形 式 ， 并 且 按 照 字母 表 排 序 。 


脚本 7-7 这 个 脚本 接受 一 系列 任意 格式 和 次 序 的 姓名 ,并 且 将 它们 转换 成 标准 格式 的 排序 列表 


window.onload = initForms; 






































function initForms() { 
for (var i=0; i« document.forms.length; i++) { 
document. forms[i].onsubmit = validForm; 


} 
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function validForm() { 
var allTags = document.getElementsByTagName("*") ; 


for (var i-0; i«allTags.length; i++) { 
validTag(allTags[i]); 


return false; 


function validTag(thisTag) { 
var allClasses - thisTag.className.split(" "); 


for (var j-0; j«allClasses.length; j++) { 
validBasedOnClass(allClasses[j]); 
} 


function validBasedOnClass(thisClass) { 
switch(thisClass) { 
case "": 
break; 
case "namelist": 
thisTag.value = nameList(thisTag.value) ; 
default: 


} 





} 


function nameList(inNameList) { 
var newNames = new Array; 
var newNameField = ""; 
var re = /\s*\n\s*/; 
var nameList = inNameList.split(re); 


re = /*(\S)(\S+)\s(\S) (\S+)$/; 


for (var k=0; k<nameList.length;k++) { 
if (namelist[k]) { 
re.exec(nameList[k]); 
newNames[k] = RegExp.$3.toUpperCase() + RegExp.$4.toLowerCase() +", " + RegExp.$1.toUpper- 
—Case() + RegExp.$2.toLowerCase(); 
j 


j 

newNames. sort() ; 

for (k=0; k«newNames.length; k++) { 
newNameField += newNames[k] + "\n"; 


return newNameField; 





> 对 字符 串 进行 格式 化 和 排序 








1. newNames[k] = RegExp.$3.toUpperCase() + RegExp.$4.toLowerCase() + ", " + RegExp.$1. 
—toUpperCase() + RegExp.$2.toLowerCase(); 


在 这 个 示例 中 , 我 们 希望 按照 姓氏 进行 排序 ， 所 以 创建 一 个 新 的 newNames 数组 ,其 元 素 的 构成 是 
转换 为 大 写 的 姓氏 首 字 母 ， 转 换 为 小 写 的 姓氏 剩余 字母 ， 然 后 是 一 个 逗号 和 一 个 空格 ， 再 是 转换 为 大 
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写 的 名 字 首 字母 ， 最 后 是 转换 为 小 写 的 名 字 剩 余 字 母 。 


2. newNames.sort(); 


数组 方法 sort() 对 数组 中 的 元 素 进行 排序 ， 并 履 盖 原来 的 内 容 。 图 7-9 显示 转换 之 前 的 版 本 ， 
图 7-10 显示 转换 之 后 的 版 本 。 





SS 
Æ Name List Sorter - Internet Explorer provided by Dell 
A, 







=, | (Æ Name List Sorter - Internet 
ji 
Í = | Æ] http;//di.dropbox.. v | 好 | X $I open new windo 2 





rer provided by Dell coy A 








File Edit View Favorites Tools Help 











| 
Z |Æ] http://dl.dropbox... v | + | X | *M open new windo 2 
File Edit View Favorites Tools Help 
ve Favorites — (& Name List Sorter ye Favorites | @ Name List Sorter 














Sort a list of names 


Sort a list of names 
Enter a list of names with first name first, one per line: 


Ralph Spoilsport 





Enter a list of names with first name first. one per line: 
^ Bialovsky, Bettyjo 
BettyJo Bialovsky Danger, Nick 
Audrey Farber Farber, Audrey 
Melanie Haber Haber, Melanie 
Porgy Tirebiter 
Nick Danger 


Spoilsport, Ralph 
Tirebiter, Porgy 








e Internet | Protected Mode: On fg v 100% v» 





@ Internet | Protected Mode: On fg vy 100% - 





图 7-9 这 是 用 户 输入 的 姓名 列表 图 7-10 这 是 排序 和 整理 之 后 的 列表 ， 符 合 了 


我 们 的 要 求 
7.6 ”对 字符 串 进行 格式 化 和 验证 


可 以 使 用 正则 表达 式 对 所 输入 的 值 同时 进行 格式 化 和 验证 。 在 脚本 7-8 中 ， 用 户 输入 一 个 任意 格 
式 的 电话 号 码 。 最 终结 


终结 果 要 么 是 一 个 经 过 格式 化 的 电话 号 码 , 要 么 是 输入 机 
粗 体 。 





E 变 成 红色 , 标签 变 成 红色 、 


脚本 7-8 ”这 个 脚本 对 用 户 输入 的 电话 号 码 进 行 验证 和 格式 化 
window.onload = initForms; 


function initForms() { 


for (var i=0; i< document.forms.length; i++) { 
document. forms[i].onsubmit = validForm; 


} 
function validForm() { 
var allTags = document.getElementsByTagName("*") ; 


for (var i-0; i«allTags.length; i++) { 
validTag(allTags[i]); 


return false; 
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function validTag(thisTag) { 
var outClass = ""; 
var allClasses = thisTag.className.split(" "); 


for (var j=0; j<allClasses.length; j++) { 
outClass += validBasedOnClass(allClasses[j]) + " "; 
} 


thisTag.className = outClass; 


if (outClass.indexOf("invalid") > -1) { 
invalidLabel(thisTag.parentNode); 
thisTag.focus(); 
if (thisTag.nodeName -- "INPUT") ( 
thisTag.select(); 
} 


} 


function validBasedOnClass(thisClass) { 
var classBack = ""; 


switch(thisClass) { 
case "": 
case "invalid": 
break; 
case "phone": 
if (!validPhone(thisTag.value)) classBack = "invalid "; 
default: 
classBack += thisClass; 


return classBack; 


} 


function validPhone(phoneNum) { 
var re = /*\(?(\d{3})\)2[\.\-\7]?2(\d{3})[\.\-\7 12 (\d{4}) $75 


var phoneArray = re.exec (phoneNum) ; 

if (phoneArray) { 
document. getElementById ("phoneField").value = "(" + phoneArray[1] + ") " + phoneArray[2] + 
+ phoneArray[3]; 
return true; 


return false; 


function invalidLabel(parentTag) { 
if (parentTag.nodeName -- "LABEL") ( 
parentTag.className += " invalid"; 
} 


} 
} 
} 


> 对 电话 号 码 进 行 格式 化 和 验证 








1. var re = /*\(?(\d{3})\)?2[\.\-\/ ]?(\d{3})[\.\-\7 120(49$/; 
这 个 正则 表达 式 寻 找 这 样 的 字符 串 : 

口 有 一 个 可 选 的 左 圆 括 号 \(? 

口 有 3 个 数字 (\d{3}) 
口 有 一 个 可 选 的 右 圆 括号 \)? 
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口 有 一 个 可 选 的 点 号 、 连 字符 、 正 和 斜 杠 或 空格 [\.\-\/ D? 
口 有 3 个 数字 (\d{3}) 
口 有 一 个 可 选 的 点 号 、 连 字符 、 正 斜 杠 或 空格 [\.\-\/ T? 
口 有 4 个 数字 (\d{4}) 

这 个 模式 指定 了 字符 串 的 开头 和 结尾 ， 所 以 如 果 有 人 额外 的 字符 ,字符 串 就 不 匹配 。 如 果 找 到 三 位 
的 地 区 编码 数字 、 三 位 的 前 缀 数字 和 四 位 的 后 级 数字 ， 就 分 别 保存 它们 。 

2. var phoneArray = re.exec(phoneNum); 

exec() 方 法 在 phoneNum 上 执行 re 中 存储 的 正则 表达 式 。 如 果 没 有 找到 要 搜索 的 模式 ( 见 图 7-11 ) ， 
phoneArray 就 被 设置 为 null。 否 则 ，phoneArray 就 设置 为 一 个 数组 ， 其 中 包含 正则 表达 式 存储 的 值 。 

3. if (phoneArray) { 


document.getElementById ("phoneField").value = "(" + phoneArray[1] +") "+phoneArray[2] 
+ "-" + phoneArray[3]; 


如 果 phoneArray 非 空 ， 就 会 成 功 地 通过 这 个 测试 ， 这 说 明 数 组 已 经 初始 化 了 。 所 以 , 将 页 面 上 的 
表单 字段 重新 设置 为 标准 格式 : 包围 在 圆 括号 中 的 地 区 编码 ， 加 一 个 空格 ,然后 是 前 级 、 连 字符 和 后 
级 ， 如 图 7-12 所 示 。 






























































@ Phone number validator - Mozilla Firefox army 
_ ü — —É 000 
File Edit View History Bookmarks Tools Help 


-~ »c A (D nt zy 7|) ad 


Validate a phone number 





E) Phone number validator - Mozilla Firefox arma 


File Edit View History Bookmarks Tools Help 


< P ETE E 


Validate a phone number 





: 


Enter your phone number (with area code): 


Enter your phone number (with area code): 









































(800) 555-2001 
(Reset) ( Submit (Reset) ( 
Done 2 全 Done at 
图 7-11 这 是 输入 无 效 号 码 时 的 结果 图 7-12 这 是 输入 正确 的 号 码 时 的 结 


7.7 ”使 用 正则 表达 式 替 换 元 素 


你 已 经 看 到 了 正则 表达 式 在 搜索 、 匹 配 和 替换 字符 串 方面 是 多 么 强大 。 但 是 ,还 可 以 使 用 它们 替 
换 页 面 元 素 的 名 称 ， 这 常常 可 以 节省 大 量 开发 时 间 。 在 本 节 中 ， 我们 用 一 个 正则 表达 式 改造 前 面 的 脚 
本 4-6。 这 个 脚本 建立 了 一 个 三 状态 翻转 器 。 它 是 一 个 有 用 的 脚本 ， 但 是 有 一 个 缺点 : 它 要 求 给 希望 
操纵 的 每 个 图 像 加 上 它 自 己 的 id。 这 并 不 太 困 难 ， 但 是 可 以 使 用 JavaScript 构建 页 面 元 素 的 名 称 ， 从 

现在 ， 你 应 该 回顾 一 下 脚本 4-5 和 脚本 4-6 的 工作 方式 。 稍 等 片刻 ， 我 们 继续 前 进 。 

MAS 4-6 原来 根据 每 个 图 像 的 id 动态 地 创建 图 像 的 _click Wl on 名 称 。 现 在 不 这 样 做 , 而 是 根据 每 
个 图 像 的 _off 名 称 动态 地 创建 _ click fH on 名 称 。 这 样 就 不 需要 图 像 id 了 。 脚 本 7-9 演示 了 实现 方法 。 
修改 JavaScript 并 没有 改变 这 个 页 面 的 外 观 或 行为 ， 但 是 创建 HTML 页 面 所 需 的 工作 量 减少 了 。 
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脚本 7-9 可 以 使 用 正则 表达 式 减 少 编写 或 修改 HTML 文件 的 工作 量 


window.onload = rolloverInit; 


function rolloverInit() { 
for (var i=0; i<document.images.length;i++) { 
if (document. images[i].parentNode.tagName.toLowerCase() == "a") { 
setupRollover(document.images[i]); 
} 


} 
} 


function setupRollover(thisImage) { 
var re = /Ns* off^s*/; 


thisImage.outImage = new Image(); 

thisImage.outImage.src = thisImage.src; 

thisImage.onmouseout = function() { 
this.src = this.outImage. src; 


} 


thisImage.overImage = new Image(); 
thisImage.overImage.src = thisImage.src.replace(re, " 
thisImage.onmouseover = function() { 

this.src = this.overImage.src; 


} 


_on"); 





thisImage.clickImage = new Image(); 
thisImage.clickImage.src = thisImage.src.replace(re," click"); 
thisImage.onclick = function() { 

this.src = this.clickImage.src; 


} 


thisImage.parentNode.childImg = thisImage; 
thisImage.parentNode.onblur = function() { 

this.childImg.src = this.childImg.outImage.src; 
} 


thisImage.parentNode.onfocus = function() { 
this.childImg.src = this.childImg.overImage.src; 


} 
} 


> 使 用 正则 表达 式 蔡 换 元 素 


l. var re = /\s*_off\s*/; 


这 一 行 设置 一 个 新 的 正则 表达 式 模式 ， 它 在 字符 串 中 的 任何 地 方 寻找 文本 _off。 








2. thisImage.overImage.src = thisImage.src.replace(re," on"); 

脚本 4-6 中 的 这 一 行 是 thisImage.overImage.src ="images/"+ thisImage.id + "on.gif";。 新 的 
代码 使 用 re 模式 查找 特殊 的 字符 串 ， 如 果 找 到 ,就 替换 它 。 本 例 中 我 们 搜索 字符 串 中 的 _off,， HEE 
替换 为 on。 这样 我 们 就 不 必 为 在 图 像 上 设置 id 属性 费心 了 ， 根 本 不 需要 id 了 。 


3. thisImage.clickImage.src = thisImage.src.replace(re," click"); 





























Tn 











脚本 4-6 中 的 这 一 行 是 thisImage.clickImage.src ="images/"+ thisImage.id + " click.gif";. 
新 的 代码 搜索 off 并 且 将 它 替 换 为 click. 
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v 提示 














产生 与 把 鼠标 移动 到 

















j 户 可 以 通过 制 表 键 移 动 到 





日 








图 像 上 相同 的 效 呈 


o 


O 如 果 你 的 图 像 采用 GIF 和 JPEG 两 种 格式 ， 这 个 脚本 也 会 更 方便 。 现 在 的 JavaScript 代码 甚至 
不 需要 知道 每 个 图 像 的 扩展 名 是 什么 。 
O 你 可 能 已 经 注意 到 ， 这 个 脚本 末尾 的 一 些 代 码 是 脚本 4-6 中 没有 的 。 在 这 里 添加 这 些 代码 是 为 
了 提高 可 访问 性 。 现在, 那些 使 用 键盘 而 不 是 鼠标 的 





图 像 上 ,这 会 





第 8 章 


处 理事 件 








件 是 用 户 在 访问 页 面 时 执行 的 操作 。 当 浏览 器 探测 到 一 个 事件 时 ， 比 如 用 鼠标 单 击 或 按键 ， 
它 可 以 触发 与 这 个 事件 相关 联 的 JavaScript 对 象 ， 这 些 对 象 称 为 事件 处 理 程序 ( event 
handler )。 在 本 书 前 面 的 许多 地 方 ， 你 已 经 见 到 了 使 用 事件 处 理 程序 的 示例 。 但 是 ， 事 件 处 理 是 一 项 
重要 的 技术 ， 而 且 它 实际 上 包含 了 用 户 与 页 面 的 所 有 交互 ， 所 以 值得 用 单独 的 一 章 来 讲解 它 。 
在 本 章 中 ， 你 将 看 到 如 何 使 用 事件 处 理 程序 来 操作 和 窗口、 捕获 鼠标 移动 和 单 击 、 处 理 表 单 事件 以 
及 在 用 户 按 下 键盘 上 的 键 时 作出 响应 。 


8.1 ”处理 窗口 事件 


当 用 户 执行 某 些 会 影响 整个 浏览 器 窗口 的 操作 时 ， 就 会 发 生 窗口 事件 。 最 常见 的 窗口 事件 是 通过 
打开 某 个 网 页 来 加 载 窗口 。 还 有 在 窗口 关闭 、 移 动 或 转 到 后 台 时 触发 事件 处 理 程序 的 事件 。 

在 使 用 事件 处 理 程序 时 ,常常 会 发 现 使 用 点 号 语法 将 事件 处 理 程序 与 一 个 对 象 连接 起 来 是 有 意义 
的 ， 如 下 所 示 : 


window.onfocus 












































window.onload 

document . onmousedown 

注意 , 像 这 样 将 事件 处 理 程序 作为 对 象 的 一 部 分 使 用 时 , 事件 处 理 程序 的 名 称 是 全 小 写 的 。 另 外 ， 
更 符合 标准 的 做 法 是 ,将 事件 处 理 程序 放 在 外 部 脚本 而 不 是 HTML 标签 中 ， 这 样 可 以 将 JavaScript fX 
155; HTML 代码 分 隔 开 ， 而 且 在 一 个 外 部 文件 中 编辑 ( 或 替换 ) 所 有 JavaScript 代码 会 更 容易 。 


8.1.1 onload 事件 


在 本 书 中 , 我 们 经 常 使 用 onload 事件 。 当 用 户 进入 页 面 而 且 所 有 页 面 元 素 都 完成 加 载 时 ,就 会 触 
发 这 个 事件 。 流行 的 广告 弹出 窗口 就 是 使 用 onload 事件 处 理 程序 的 典型 例子 , 尽管 这 种 方式 可 能 让 用 
户 不 快 。 

尽管 我 们 已 经 多 次 在 脚本 中 见 过 使 用 onload 的 情况 , 但 是 到 目前 为 止 , 我 们 一 直 回 避 了 一 个 
重要 的 问题 : 如果 在 加 载 页 面 时 需要 进行 多 个 操作 ,那么 应 该 怎么 做 ?脚本 8-1 和 脚本 8-2 演示 
了 具体 做 法 。 
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脚本 8-1 多 重 onload 示例 的 HTML 


<!DOCTYPE html» 
<html> 
<head> 
«title»Welcome!«/title» 
«script src="script01.js"></script> 
«/head» 
«body id-"pageBody"» 
«hi»Welcome to our Web site!</h1> 





«/body» 
«/html» 
脚本 8-2 使 用 新 的 addOnload() 函 数 设 置 多 重 onload 属性 
addOnload(initOne) ; 
addOnload(initTwo) ; 


addOnload(initThree) ; 


function addOnload(newFunction) { 
var oldOnload = window. onload; 


if (typeof oldOnload == "function") { 
window.onload = function() { 
if (oldOnload) { 
oldOnload(); 


newFunction() ; 


else { 
window.onload = newFunction; 
} 
} 


function initOne() { 
document .getElementById("pageBody").style.backgroundColor = "#00F"; 
} 


function initTwo() { 
document .getElementById("pageBody").style.color = "#F00"; 
} 


function initThree() { 
var allTags = document.getElementsByTagName("*") ; 


for (var i-0; i«allTags.length; i++) { 
if (allTags[i].nodeName == "H1") { 
allTags[i].style.border = "Spx green solid"; 
allTags[i].style.padding - "25px"; 
allTags[i].style.backgroundColor = "#FFF"; 


} 
} 
} 


1. addOnload(initOne) ; 
addOnload(initTwo) ; 
addOnload(initThree) ; 
在 这 个 脚本 中 ， 在 首次 加 载 页 面 时 ， 我 们 和 希望 发 生 完全 不 同 的 三 种 情况 。 设 置 window.onload = 
次 是 不 行 的 ， 因 为 第 二 次 设置 会 覆盖 第 一 次 的 ， 第 三 次 设置 会 覆盖 第 二 次 的 。 相 反 ， 我 们 要 调用 一 个 
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新 函数 addonload() ， 由 它 蔡 我 们 处 理 onload 处 理 程序 。 对 于 每 个 调用 ， 传 递 一 个 参数 : 在 触发 onload 
事件 时 希望 运行 的 函数 的 名 称 。 结 果 见 图 8-1。 





























IÊ Welcome! - Internet Explorer provided by Dell (fo den es) 
GO + [E] http//wonwjavascripte ~ | +4 | x | Live Search 只 -| 
File Edit View Favorites Tools Help 

ede | Welcome > E) -局 ~ 四 paoev 


Welcome to our Web site! 











Done Q9 Internet | Protected Mode: On 100% + 








图 8-1. 这 个 脚本 设置 在 加 载 页 面 时 运行 的 多 个 onload 处 理 程序 
( 在 这 个 示例 中 ， 用 于 进行 颜色 格式 化 ) 


2. function addOnload(newFunction) { 

与 其 他 函数 一 样 ， 这 一 行 开始 一 个 新 函数 。 传 递 给 它 的 参数 是 一 个 函数 名 。 

这 可 能 让 你 觉得 有 点 儿 困惑 ， 所 以 下 面 举 一 个 例子 。 我 们 并 不 调用 

window.onload = myNewFunction; 
而 是 调用 

addOnload(myNewFunction) ; 
其 最 终 效 果 是 相同 的 。 

3. var oldOnload = window.onload; 

这 一 行 声 明 一 个 新 变量 oldonload。 如 果 已 经 设置 了 window.onload， 就 将 它 的 值 存储 在 这 里 。 如 
果 还 没有 设置 ， 这 一 行 也 没什么 坏处 。 

4. if (typeof oldOnload == "function") { 

我 们 在 这 一 行 中 检查 oldonload 变量 的 类 型 。 如 果 已 经 设置 了 window.onload, 那么 它 应 该 是 一 个 
函数 调用 ( 和 否则， 就 是 空 的 )。 如 果 它 是 函数 ， 就 执行 以 下 代码 。 

5. window.onload = function() { 


if (oldOnload) { 
oldOnload(); 









































newFunction(); 





) 

这 些 代码 重新 设置 window.onload 的 值 来 完成 两 种 操作 : 它 之 前 所 做 的 操作 以 及 参数 中 传递 的 新 
函数 。window.onload 事件 处 理 程序 设置 为 一 个 匿名 函数 ( 没有 函数 名 的 函数 ) 。 然 后 ， 如 果 oldonload 
有 值 ( 它 应 该 有 值 ， 进 行 这 个 测试 是 为 了 解决 IE 7 中 的 一 个 bug )， 就 执行 window. onload 原本 应 该 完 
成 的 操作 。 但 是 ， 在 函数 结束 之 前 ， 还 要 执行 newFunction()。 

6. else { 

window.onload = newFunction; 
































} 
如 果 oldOnload 不 是 函数 ( 也 就 是 说 , 它 是 未 定义 的 ) 就 在 页 面 完成 加 载 时 执行 新 图 数 。 按 照 这 


I3 
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各 方式， 我们 可 以 多 次 调用 addOnload(): 第 一 次 它 将 自己 的 函数 赋值 给 window.onload; 第 二 次 和 第 
三 次 会 创建 匿名 函数 ， 让 JavaScript 执行 以 前 设置 的 操作 和 新 添加 的 函数 。 
v 提示 
口 如 果 想 让 一 个 onload 处 理 程序 执行 多 个 操作 , 最 简单 的 方法 是 创建 一 个 执行 所 有 操作 的 函数 ， 
然后 让 onload 处 理 程序 调用 这 个 函数 。 但 是 ， 要 确保 每 个 函数 都 返回 。 例 如 ， 如 果 你 的 函数 
包含 对 本 身 的 setTimeout() 调 用 ， 它 将 不 会 返回 ， 因 此 不 会 到 达 被 调用 函数 的 其 余部 分 。 
口 如 果 你 正在 修改 现 有 的 代码 ,那么 很 容易 意外 地 重新 设置 window.on1oad 一 一 任何 HTML 页 面 
都 可 以 调用 多 个 外 部 JavaScript 文件 ， 这 些 文 件 都 可 以 设置 事件 处 理 程序 。 如 果 其 中 一 个 文件 
直接 设置 了 window.onload， 但 是 每 次 你 都 在 此 之 后 调用 addonload() ,那么 不 会 有 问题 。 但 是 ， 
Tin 4 EL EL window. onload 之 后 ( 无 论 是 直接 设置 ,还 是 通过 addOnload() ), 再 设置 window.onload， 
原来 设置 的 函数 就 会 丢失。 
口 这 个 脚本 在 一 定 程 度 上 基于 Simon Willison ( simonwillison.net ) 的 一 个 脚本 ， 在 本 书 中 使 用 它 
已 经 得 到 了 Simon 的 许可 。 


8.1.2 ”onunload 事 件 


当 用 户 离开 网 页 时 ， 就 会 触发 onunload 事件 处 理 程序 。 这 个 事件 最 常见 的 用 途 是 ， 当 用 户 离 开 某 
些 商 业 站 点 (尤其 是 色情 站 点 ) 时 弹出 广告 窗口 。 如 果 你 访问 色情 站 点 的 话 ， 常 常会 发 现 几乎 不 可 能 
离开 一 一 每 当 你 试图 关闭 窗口 或 导航 到 别处 时 ， 都 会 出 现 一 个 接 一 个 的 窗口 ， 其 中 重新 打开 同样 的 页 
面 或 同类 的 其 他 页 面 。 

因此 ， 用 户 非 常 讨 大 onunload 处 理 程序 ， 所 以 使 用 它 时 要 慎重 。 


8.1.3 ”onresize 事 件 


Netscape 4.x 有 一 个 众所周知 的 bug: 当 调 整 网 页 的 大 小 时 ,不 会 重新 绘制 动态 内 容 。 脚 本 8-3 和 
脚本 8-4 迫使 页 面 重新 加 载 它 的 内 容 ， 从 而 避免 了 这 个 问题 。 好 在 Netscape 6 和 更 高 的 版 本 已 经 纠正 
了 这 个 bug. 


脚本 8-3 这 个 HTML 在 一 个 多 行 注释 中 隐藏 了 一 段 JavaScript 代码 , 因此 它 会 在 比较 老式 的 浏览 
中 起 作用 


<!DOCTYPE html» 
<html> 
<head> 
<title>onResize Netscape fix</title> 
<script src="script02.js"></script> 
</head> 
<body> 
«hi» 
«script» 
«1-- Hide code from older browsers 










































































































































































document.write("This is dynamic content") 


// Stop hiding code --» 
</script> 
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</h1> 
</body> 
</html> 


脚本 8-4 可 以 用 这 个 脚本 纠正 Netscape 4x 的 动态 内 容重 新 绘制 的 bug 
window.onresize = resizeFix; 


if (document.layers) { 
var origWidth = window. innerWidth; 
var origHeight = window. innerHeight; 


function resizeFix() { 
if (document.layers) { 
if (window.innerWidth != origWidth || window.innerHeight != origHeight) { 
window. location. reload(); 


} 
} 


l- window.onresize = resizeFix; 
个 事件 处 理 程序 与 window 对 象 连接 在 一 起 ， 它 调用 resizeFix 函数 。 
2. if (document.layers) { 
我 们 只 希望 对 使 用 Netscape 4.x 的 用 户 执 行 以 下 代码 , 而 这 种 测试 是 检查 Netscape 4.x N Và gi Hh) c 
AFE. document. layers 对 象 只 在 这 种 浏览 器 中 存在 。 


3. var origWidth = window.innerWidth; 
var origHeight - window.innerHeight; 


如 果 用 户 使 用 Netscape 4x， 那 么 我 们 希望 保存 浏览 器 窗口 当前 的 高 度 和 宽度 ， 供 后 面 使 用 。 
4. function resizeFix() { 
3X FES Ba b SEN Vi i Bat A eS AT 
5. if (document.layers) { 
同样 ， 进 行 检查 ， 确 保 用 户 正在 使 用 Netscape 4.x. 
6. if (window.innerWidth != origWidth || window.innerHeight != origHeight) { 
如 果 这 个 测试 发 现 窗口 的 高 度 或 宽度 已 经 改变 了 ,那么 说 明 用 户 调 整 了 窗口 大 小 ,因此 我 们 希望 
迫使 页 面 重新 加 载 。 如 果 浏 览 器 窗口 没有 改变 ， 那么 onresize 处 理 程序 是 由 于 Netscape 浏览 需 绘 制 
滚动 条 触发 的 ， 所 以 可 以 忽略 这 个 事件 。 

7. window.location.reload(); 


如 果 用 户 确实 调整 了 窗口 大 小 ， 那 么 重新 加 载 页 面 ( 见 图 8-2 )。 
0 SNetscape: onResize Netscape fix —— PB 
Back Forward Reload Home Search Netscape Images Print Security p 加 


$| Location: Jp [http://www.chaloedony.com/javasoript/js4 /chap09 /scriptO2 html 

































































































































































This is dynamic content 
































图 8-2 重新 加 载 的 页 面 (但 是 这 个 操作 显得 有 点 儿 述 钝 ) 
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8.1.4 ”onmove 事 件 


E 


口 移动 时 ， 会 触发 onmove 事件 处 理 程 序 。 





8.1.5 onabort 事 件 


当 用 户 取消 网 页 上 的 图 像 加 载 时 ， 会 触发 onabort 事件 处 理 程 


所 有 浏览 器 都 支持 它 。 


8.1.6 ”onerror 事 件 


当 页 面 上 发 生 JavaScript 错误 时 ， 可 能 会 触发 onerror 事件 处 理 程 


Vv 提示 


O 在 Web 上 的 复杂 页 面 中 ， 设 置 onerror = null SRY, WR WH 
些 错误 消息 将 不 会 向 用 户 显 示 ， 这 样 用 户 就 











序 。 这 种 事件 不 太 常 用 ， 而 





HJf4E 

















序 。 














ij 上 使 用 这 行 代 码 ， 某 





ux 


浏览 需 。 


8.1.7 onfocus 事 件 


onfocus 和 onblur 事件 处 理 程序 互 为 镜像 , 听 起 来 就 像 现 实 中 你 在 JavaScript FE 
PT COS Te HI T 





会 少 受 干 








扰 ， 但 是 ， 究 竟 隐 藏 哪些 错误 取决 于 


序 上 奋战 到 午夜 一 样 。 














[的 活动 窗口 时 ， 就 会 触发 onfocus 人 处 型 





程序 。 脚 本 8-5 和 脚本 8-6 使 用 onfocus 






































处 理 程 序 迫 使 页 面 总 是 退 到 后 面 ( 见 图 8-3 )。 
脚本 8-5 ”这 是 总 显示 在 后 面 的 页 面 的 HTML 
<!DOCTYPE html» 
<html> 
<head> 


<title>Always in Back</title> 
<script src="script03.js"></script> 


</head> 
<body> 


«hi»Unimportant content that should 


never be in front</h1> 


«/body» 
«/html 
脚本 8-6 ”可 以 使 用 onfocus 处 理 程序 控制 窗口 的 堆放 


window.onfocus = moveBack; 


function moveBack() { 


self.blur(); 


]. window.onfocus - moveBack; 


这 个 例子 也 使 用 了 窗 








口 对 象 和 事件 处 理 程序 对 象 来 调用 一 个 函数 ， 这 








次 调用 的 是 moveBack。 
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2. function moveBack() { 
self.blur(); 
} 


如 果 这 个 浏览 带 窗 口 成 为 活路 窗口， 就 会 触发 这 个 函数 ， 它 迫使 窗口 失去 焦点 ( 即 进 入 不 活跃 状态 )。 


EE 


Bi Mos Visited _] Geng Stated ict 
f | Rer Back El 5 




















Unimportant content that 
should never be in front 


[I] Backup Brain | Technology, polities, culture - Moaila Firefox wie 
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Backup Brain " 






































图 8-3 后 面 的 页 面 无 法 获得 焦点 














8.1.8 onblur 事 件 











如 果 你 和 希望 一 个 窗口 总 是 出 现在 所 有 其 他 窗口 前 面 〈 例 如 ， 一 个 控制 主页 面 内 容 的 帮助 窗口 )， 
那么 脚本 8-7 和 脚本 8-8 就 是 你 需要 的 。 如 果 用 户 试图 让 这 个 页 面 退 到 后 面 (这 会 触发 onblur 处 理 程 
序 )， 脚 本 会 迫使 它 再 次 回 到 前 面 。 


脚本 8-7 这 是 总 显示 在 前 面 的 页 面 的 HTML 


<!DOCTYPE html> 
<html> 
<head> 
<title>Always in Front</title> 


<script src="script04.js"></script> 
</head> 


<body> 


«hi»Important content that should always be in front</h1> 
</body> 
</html> 


脚本 8-8 ”这 个 脚本 使 用 onblur 使 窗口 一 直 显 示 在 前 面 ( 即 处 于 活跃 状态 ) 


window.onblur = moveUp; 









































function moveUp() { 
self.focus(); 
} 
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1. window.onblur = moveUp; 
这 里 也 使 用 了 窗口 对 象 和 事件 处 理 程序 对 象 来 调用 一 个 函数 ， 这 一 次 调用 的 是 moveUp()。 
2. function moveUp() { 

self.focus(); 


WN Rot DUE Vi Bl ON ANTRAL, ， 就 会 触发 这 个 函数 ， 它 迫使 窗口 变 成 活跃 窗口 。 

V 提示 

口 千 万 要 注意 ， 不 要 打开 两 个 包含 这 些 代码 的 窗口 。 你 的 浏览 器 很 可 能 无 法 妥善 地 处 理 这 种 

情况 ! 

口 可 以 不 在 帮助 窗口 上 使 用 这 个 脚本 , 而 是 在 主 窗口 上 使 用 脚本 8-6, 从 而 迫使 主 窗口 退 到 后 面 ， 

而 将 帮助 窗口 留 在 最 前 面 。 

O 你 可 能 更 熟悉 onblur 事件 的 另 一 种 更 讨厌 的 用 途 : 广告 发 布 者 在 你 浏览 的 当前 网 页 后 面 悄 
悄 地 打开 一 个 广告 窗口 ， 直 到 你 关闭 了 当前 窗口 ， 才 发 现 后 面 已 经 堆 了 很 多 窗口 。 人 们 往 
往 把 这 归罪 于 他 们 打开 的 最 后 一 个 Web 站 点 , 但 是 实际 上 广告 可 能 是 更 星之 前 浏览 的 页 面 
所 创建 的 。 


8.2 处理 鼠标 事件 


用 户 与 页 面 的 许多 交互 都 是 通过 鼠标 移动 或 鼠标 单 击 进行 的 。JavaScript 为 这 些 事件 提供 了 一 组 
强健 的 处 理 程序 。 

































































































































































8.2.1 onmousedown 事 件 


JavaScript 新 手 最 经 常 问 到 的 问题 之 一 是 ,“ 如 何 对 访问 我 的 页 面 的 用 户 隐藏 脚本 ? ”答案 是 做 不 
到 。 如 果 用 户 足 够 有 妆 力 的 话 ， 他 们 总 有 办 法 查 明 你 代码 中 的 内 容 。 
但 是 , 如 果 你 确实 需要 对 一 般 水 平 的 访问 者 隐藏 代码 , 那么 脚本 8-9 和 脚本 8-10 可 以 防止 访问 者 
通过 鼠标 单 击 打开 快捷 菜单 ， 从 而 防止 他 们 查看 页 面 的 源 代码 。 


脚本 8-9 ”你 可 能 能 查看 这 个 页 面 的 源 代码 ， 但 是 你 需要 做 一 些 工作 


<!DOCTYPE html» 
<html> 
<head> 
<title>onMousedown capture</title> 
<script src="script05.js"></script> 
</head> 
<body> 
«hi»Important source data that someone 
might want to look at.</h1> 
</body> 
</html> 
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脚本 8-10 ”这 个 脚本 会 阻止 经 验 不 太 丰 富 的 用 户 在 页 面 上 打开 快捷 菜单 


if (typeof document.oncontextmenu == "object") { 
if (document.all) ( 
document.onmousedown - captureMousedown; 


else ( 
document.oncontextmenu - captureMousedown; 


else ( 
window.oncontextmenu = captureMousedown; 


function captureMousedown(evt) ( 
if (evt) ( 
var mouseClick = evt.which; 


} 
else { 
var mouseClick = window.event.button; 


} 


if (mouseClick==1 || mouseClick==2 || mouseClick==3) { 
alert("Menu Disabled"); 
return false; 


} 
l.if (typeof document.oncontextmenu == "object") { 


if (document.all) { 
document.onmousedown = EE 


第 一 块 代码 检查 浏览 器 是 否 是 Firefox， 这 种 浏览 器 使 用 window.oncontextmenu ( 因此 不 知道 
document .oncontextmenu ) 。 如 果 它 不 是 Firefox, Hir document.all， 这 是 检查 浏览 带 是 否 是 IE 的 
简便 方法 。 如 果 它 是 了 下， 就 在 触发 onmousedown 时 运行 captureMousedown()。 
2.else { 
document.oncontextmenu = captureMousedown; 
如 果 到 达 了 这 里 ， 就 说 明 访问 者 使 用 的 是 Safari ， 这 种 浏览 器 需要 在 document 对 象 上 设置 
oncontextmenu。 


3. else { 
window.oncontextmenu = captureMousedown; 

































































后 ， 如 果 浏 览 器 是 Firefox, 3bib window 的 oncontextmenu 事件 调用 captureMousedown() 函数 
4. function captureMousedown(evt) { 
eee 
时 会 自动 地 生成 和 传递 evt 参数 ， 变量 包含 关于 事件 的 信息 。 


5. if (evt) ( 
var mouseClick = evt.which; 


lint 

















} 
else { 

var mouseClick = window.event.button; 
} 


如 果 evt 变量 存在 , 就 可 以 通过 检查 evt which 来 判断 用 户 单 击 的 是 哪个 按钮 。 如 果 用 户 使 用 IE， 





















































160 $83 ”处 理事 件 





用 户 操 作 的 结果 会 在 window.event.button 中 找到 。 无 论 是 哪 种 情况 ,结果 都 存储 在 mouseClick 变量 中 。 


6.if (mouseClick==1 || mouseClick==2 || mouseClick==3) { 
alert("Menu Disabled"); 
return false; 


} 
如 果 mouseClick 是 1、2 2k 3, 就 弹出 一 个 警告 框 ( 见 图 8-4 )， 向 用 户 指出 这 个 功能 已 经 禁用 了 ， 
并 且 返 回 false。 返 回 false 会 阻止 显示 菜单 窗口 。 











图 8-4 ”这 个 警告 框 会 让 一 般 用 户 放弃 查看 源 代码 的 企图 
( 也 会 给 有 经 验 的 用 户 制造 点 儿 障 但 ) 





vV 提示 

口 我 们 为 什么 要 检查 3 种 不 同 的 鼠标 单 击 ”检查 一 种 难道 不 够 吗 ? 从 理论 上 是 够 了 , 但 是 在 实际 
上 不 够 ( 见 表 8-1), 但 是 ,这 种 方法 可 能 有 负面 效果 : 你 可 能 成 功 地 阻止 了 单 击 左 键 和 单 击 右 

键 〈 例 如 ， 为 了 防止 用 户 将 网 页 上 的 图 像 保存 下 来 )， 但 是 ， 这 也 意味 着 阻止 用 户 单 击 页 面 上 



































的 任何 链接 。 
表 8-1 鼠标 单 击 编码 
编 码 浏览 器 /事件 
1 IE/ 单 击 左 键 
所 有 Mac 浏览 器 / 按 Control 键 的 同时 单 击 左 键 
2 IE/ 单 击 右键 
3 Firefox ( Windows ) / 单 击 右键 
所 有 Mac 浏览 器 / 单 击 右键 


O 对 于 有 经 验 的 访问 者 ， 回 避 这 个 脚本 的 控制 是 非常 容易 的 : 他 们 只 需 在 浏览 器 中 关闭 JavaScript 
功能 , 单 击 功能 就 会 恢复 了 。 将 JavaScript 代码 放 在 外 部 的 js 文件 中 似乎 也 能 阻碍 用 户 查看 源 代 
码 , 但 是 用 户 可 以 查看 硬盘 上 的 缓存 文件 夹 。 他 们 也 可 以 查看 页 面 的 源 代 码 ， 找 到 外 部 脚本 文件 
的 名 称 ， 然 后 在 浏览 器 中 输入 外 部 文件 的 URL， 这 样 就 可 以 正常 地 显示 文件 的 内 容 。 如 果 你 确 
实 很 担心 自己 的 源 代码 泄露 出 去 ， 那 么 唯一 真正 可 靠 的 保密 方法 是 不 把 它 放 在 Web Eo 
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O IE 理解 document .oncontextmenu， 所 以 你 可 能 认为 可 以 通过 设置 它 来 处 理 这 些 事件 一 一 但 是 不 行 。 
下 是 唯一 需要 设置 document . onmousedown 的 浏览 器 .另外 ,如 果 同 时 设置 window. oncontextmenu 
和 document.onmousedown, Firefox 会 触发 每 个 事件 两 次 ， 每 个 操作 一 次 。 











8.2.2 onmouseup 事 件 
与 onmousedown 事件 相似 ，onmouseup 事件 会 在 用 户 单 击 鼠标 然后 释放 按钮 时 触发 。 


8.2.3 ”onmousemove 事 件 


当 页 面 的 访问 者 移动 鼠标 时 ， 就 会 触发 onmousemove 事件 。 在 这 个 示例 中 ， 我 们 让 用 户 觉 得 有 一 
双眼 睛 一 直 采 着 他 们 的 鼠标 移动 ( 见 图 8-5 ). 脚 本 8-11、 脚 本 8-12 和 脚本 8-13 演示 如 何 使 用 JavaScript 
显示 “一 对 眼睛 ”"， 它 们 会 随 着 访问 者 移动 鼠标 而 转动 。 

(@ Mouse Movements - Mozilla Firefox rex) 


B- QU X A (L) htp//d.dropb 7; ~| |$- Goog. © 


2) Most Visited | | Getting Started à) Latest Headlines | | White text 





























|] Mouse Movements +| 














Done 














8-5 ”无 论 鼠 标 指针 移动 到 哪里 ， 这 对 眼睛 都 会 一 直 盯 着 它 
脚本 8-11 “ 紧 跟着 的 眼睛 ”示例 的 HTML 


<!DOCTYPE html» 
<html> 
<head> 
<title>Mouse Movements</title> 
<link rel="stylesheet" href="script06.css"> 
<script src="script06.js"></script> 
</head> 
<body> 
<img src-"images/circle.gif" alt-"left eye" id="lEye"> 
<img src-"images/circle.gif" alt-"right eye" id="rEye"> 
«img src-"images/lilRed.gif" alt-"left eyeball" id-"lDot"» 
«img src-"images/lilRed.gif" alt-"right eyeball" id-"rDot"» 
«/body» 
«/html» 
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脚本 8-12 “ 紧 跟 着 的 眼睛 ”示例 的 CSS 
body { 


} 


background-color: #FFF; 


#lEye, #rEye { 


} 


position: absolute; 


top: 100px; 
width: 24px; 


height: 25px; 


#1Dot, #rDot { 


position: absolute; 


top: 113px; 
width: 4px; 
height: 4px; 
} 
#lEye { 
left: 100px; 
} 
#rEye { 
left: 150px; 
} 
#1Dot { 
left: 118px; 
} 
#rDot { 
left: 153px; 
} 


脚本 8-13 ”这 个 脚本 让 眼睛 一 直 盯 着 用 户 的 鼠标 指针 


document.onmousemove = moveHandler; 


function moveHandler(evt) ( 


} 


if (levt) { 
evt = window.event; 


animateEyes(evt.clientX, evt.clientY); 


function animateEyes(xPos,yPos) ( 


var rightEye = document.getElementById("rEye"); 
var leftEye - document.getElementById("lEye"); 
var rightEyeball - document.getElementById("rDot").style; 
var leftEyeball - document.getElementById("lDot").style; 


leftEyeball.left = newEyeballPos (xPos, leftEye.offsetleft); 
leftEyeball.top - newEyeballPos (yPos, leftEye.offsetTop); 
rightEyeball.left = newEyeballPos (xPos, rightEye.offsetLeft); 
rightEyeball.top - newEyeballPos (yPos, rightEye.offsetTop); 


function newEyeballPos(currPos,eyePos) { 
return Math.min(Math.max(currPos,eyePos*3), eyePos+17) + "px"; 


} 
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1. document .onmousemove = moveHandler; 
对 于 所 有 浏览 器 ， 如 果 触 发 了 mousemove 事件 ， 就 调用 moveHandler() rk 2x. 
2. function moveHandler(evt) { 
if (levt) { 
evt = window.event; 

















animateEyes(evt.clientX,evt.clientY); 





每 当 发 生 mousemove 事件 时 ， 就 会 触发 moveHandler() 函 数 。 如 果 访 问 者 使 用 三 ， 就 需要 对 evt 
进行 初始 化 ， 然 后 对 于 所 有 浏览 器 ， 调 用 animateEyes() 函 数 并 且 将 鼠标 指针 的 了 和 了 坐标 传递 给 它 。 
3. function animateEyes(xPos,yPos) { 
这 个 函数 根据 传递 给 它 的 革 和 了 上 坐标 转动 眼睛 。 
4. var rightEye = document.getElementById("rEye"); 
var leftEye - document.getElementById("lEye"); 


var rightEyeball - document.getElementById("rDot").style; 
var leftEyeball = document.getElementById("lDot").style; 


这 些 代码 将 变量 设置 为 左右 眼眶 图 像 和 瞳孔 图 像 的 ido 


5. leftEyeball.left = newEyeballPos (xPos, leftEye.offsetLeft) ; 
leftEyeball.top = newEyeballPos (yPos, leftEye.offsetTop) ; 
rightEyeball.left = newEyeballPos (xPos, rightEye.offsetLeft) ; 
rightEyeball.top = newEyeballPos (yPos, rightEye.offsetTop) ; 
这 些 代码 根据 鼠标 指针 的 位 置 绘制 眼球 ， 其 中 使 用 了 下 一 步 中 定义 的 newEyeballPos () 函数 的 结果 。 
6. function newEyeballPos (currPos,eyePos) { 
return Math.min(Math.max(currPos, eyePos+3),eyePos+17) + "px"; 















































我 们 不 希望 眼球 跑 到 眼眶 外 边 。 所 以 对 于 每 只 有 眼球， 我 们 要 确保 它 尽 可 能 接近 鼠标 指针 ， 同 时 仍 
然 在 眼眶 范围 内 。 
v 提示 
O Web 上 有 一 种 常见 的 JavaScript 效果: 页 面 上 有 许多 点 (或 者 设计 者 希望 的 其 他 东西 ) 一 直 跟 
随 着 鼠标 指针 的 移动 。 我 们 不 想 重 复 已 经 存在 的 效果 ， 所 以 设计 了 转动 的 眼睛 。 但 是 ， 如 果 你 
希望 在 页 面 上 显示 尾随 鼠标 指针 的 点 ， 那 么 你 应 该 能 够 通过 修改 这 个 脚本 来 实现 。 
口 Netscape 6 有 一 个 bug， 它 使 两 个 眼球 低 了 10 像素 。 这 个 bug 在 Netscape 7 中 已 经 修复 了 。 










































































8.2.4 onmouseover 事件 


现在 ， 你 应 该 很 熟悉 这 个 事件 了 : 我 们 曾经 利用 它 实 现 图 像 翻 转 器 。 当 鼠标 移动 进 任何 注册 了 
onmouseover 事件 处 理 程序 的 区 域 时 ， 就 会 触发 这 个 事件 。 























8.2.5 ”onmouseout 事件 
点 无 疑问 ， 既 然 有 onmouseover， 当然 也 有 对 应 的 onmouseout。 当 鼠标 离开 一 个 注册 了 此 事件 的 区 
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域 时 ， 就 会 触发 这 个 事件 。 
8.2.6 ondb1lclick 事 件 


因特网 的 缺点 之 一 是 ,计算 机 用 户 已 经 习惯 的 用 户 界 面 元 素 在 Web 上 改变 了 。 例如 , 计算 机 新 用 
户 最 早 学 习 的 操作 就 是 用 鼠标 进行 双击 , 但 是 在 Web 上 没有 双击 操作 ,至 少 不 兽 有 过 。 但 是 ,现在 可 
以 使 用 脚本 8-14 、 脚 本 8-15 和 脚本 8-16 检查 鼠标 双击 。 


脚本 8-14 这 个 HTML 帮助 处 理 双击 


<!DOCTYPE html» 

<html> 

<head> 
<title>Image Popup</title> 
<link rel="stylesheet" href="script07.css"> 
«script src="script07.js"></script> 

</head> 

<body> 

<h3>Double-click on an image to see the full-size version</h3> 
<img src-"images/Imgo thumb.jpg" alt="Thumbnail 0" id="Imgo"> 
<img src="images/Img1_thumb. jpg" alt-"Thumbnail 1" id="Img1"> 
<img src="images/Img2_thumb. jpg" alt-"Thumbnail 2" id="Img2"> 



































</body> 
</html> 
脚本 8-15 这 段 CSS 使 你 的 图 像 看 起 来 更 好 看 
body { 
background-color: #FFF; 
} 
img { 
margin: O 10px; 
border: 3px #00F solid; 
width: 160px; 
height: 120px; 
} 


脚本 8-16 ”用 这 个 脚本 捕获 和 处 理 双击 


window.onload = initImages; 


function initImages() { 
for (var i=0; i<document.images.length;i++) { 
document. images[i].ondblclick = newWindow; 


} 
} 


function newWindow() { 
var imgName = "images/" + this.id + ".jpg" 
var imgWindow = window.open(imgName,"imgWin", "width=320,height=240, scrollbars=no" ) 
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口 document.images[i].ondblclick = newWindow; 


当 用 户 双 击 缩 略图 之 一 时 ， 就 会 触发 newWindow() 事 件 处 理 函 数 。 此 时 会 弹出 一 个 新 窗口 ( 见 





图 8-6 )， 其 中 显示 图 像 的 大 版 本 。 


Image Popup 











La |e || A] A) | + [6 nup:/dl.dropbox.com/u/2127486/jsvas&/chO8/scripto;. © | (Qr Google 





Double-click on an image to see the full-size version 























8.2.7 _ onclick 事件 


图 8-6 ”双击 缩 略 图 ， 就 会 打开 该 图 像 的 大 版 本 

















onclick 处 理 程序 的 工作 方式 与 ondblclick 处 理 程序 相似 ， 差 异 仅仅 是 由 单 击 触发 它 ， 而 不 是 双 




















击 触发 。onmouseup 处 理 程序 也 相似 ， 差 异 是 onclick 要 求 用 户 按 下 鼠标 按钮 并 放 开 才能 触发 ， 而 


onmouseup 只 需要 后 者 。 


8.8 ”表单 事件 处 理 


表单 事件 处 理 主要 用 来 验证 表单 。 通 过 使 用 下 面 列 出 的 事件 ， 可 以 处 理 用 户 在 表单 上 所 做 的 任何 


操作 。 


8.3.4 onsubmit 事 件 


当 用 户 单 击 Submit 按钮 来 提交 表单 时 ， 就 会 触发 onsubmit 处 到 
浏览 器 的 不 同 ， 当 用 户 退 出 表单 上 的 最 后 一 个 文本 输入 字段 时 ， 


程序 ( 参见 第 6 BE). 另外 ,根据 
也 可 能 会 触发 它 。 如 果 脚 本 包含 




















onsubmit 处 理 程序 ， 而 且 这 个 处 理 程序 的 结果 是 false, JARAW 














8.3.2 ”onreset 事 件 


当 用 户 单 击 表单 上 的 Reset 按钮 (如 果 有 这 个 按钮 的 话 ) 时 ， 就 会 触发 onreset 处 理 程序 。 如 果 








EAN BGK In A s 














表单 具有 在 加 载 页 面 时 设置 的 默认 值 ， 这 会 非常 方便 一 一 如 果 用 户 单 击 Reset 按钮 ， 就 需要 用 脚本 动 














态 地 重新 设置 默认 值 。 





1 
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8.3.3 onchange 事 件 








如 脚本 6-3 所 示 ， 当 用 户 修改 表单 字段 时 














8.3.4 onselectzfF 
如 果 用 户 选择 了 一 个 input 或 textarea 表单 区 域 中 的 文本 ， 就 会 触发 onselect 处 理 程序 。 











8.3.5 onclick 事件 


8.2 方 提 到 了 onclick 处 理 程序 , 这 里 再 次 提 到 它 是 因为 在 处 理 表单 时 经 常会 用 到 它 。 如 脚本 6-14 








所 万 











， 就 会 触发 onchange 事件 处 理 程序 。 这 可 以 用 来 立即 验 








证 输入 的 信息 ， 或 者 在 用 户 单 击 Submit 按钮 之 前 对 用 户 的 选择 作出 响应 。 




















R， 当 用 户 单 击 复 选 框 或 单 选 按钮 时 ， 就 会 触发 这 个 事件 。 脚 本 2-10 也 使 用 了 onclick 处 理 程序 。 

















在 那个 示例 中 ， 它 让 一 个 链接 对 支持 JavaScript 的 浏览 器 执行 一 种 操作 ， 而 对 不 支持 JavaScript 的 浏览 
髓 执行 完全 不 同 的 另 一 种 操作 。 


8.3.6 onblur 事 件 


本 8-19 演示 如 何 使 用 onblur 处 到 

















onblur 事件 可 以 用 于 浏览 右 窗 口 ( 如 前 本 

















i 所 示 )， 也 经 常用 在 表单 上 。 脚 本 8-17、 脚 本 8-18 和 脚 























程序 迫使 用 户 在 一 个 字段 中 输入 数据 。 


脚本 8-17 这 个 HTML 创建 一 个 简单 的 表单 
<!DOCTYPE html» 
<html> 
<head> 


<title>Requiring an entry</title> 


<link rel="stylesheet" href="script08.css"> 


«script src="script08.js"></script> 
</head> 
<body> 

<form action="#"> 

<h3> 


Email address: <input type="text" class="reqd"><br><br> 


Name (optional): <input type="text"> 
</h3> 
</form> 
</body> 
</html> 


脚本 8-18 与 JavaScript 配合 的 CSS 


body { 
background-color: #FFF; 
} 


.highlight { 
background-color: #FF9; 
} 
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脚本 8-19 ” 当 用 户 离 开 一 个 表单 字段 时 ， 可 以 在 表单 中 使 用 onblur 处 理 程序 触发 操作 
window.onload = initForm; 


function initForm() { 
var allTags = document.getElementsByTagName("*"); 


for (var i=0; i«allTags.length; i++) { 
if (allTags[i].className.indexOf ("reqd") > -1) { 
allTags[i].onblur = fieldCheck; 


} 
} 
function fieldCheck() { 
if (this.value == "") { 
this.className += " highlight"; 
this. focus(); 
} 
else { 
this.className = "reqd"; 
} 
} 

















1. if (allTags[i].className.indexOf("reqd") > -1) { 
我 们 使 用 class 属性 ( reqd ) 在 运行 时 决定 什么 时 候 应 该 使 用 onblur 事件 处 理 程序 。 只 需 在 输入 om 
标签 中 添加 class="reqd" 就 可 以 触发 这 个 事件 ， 而 不 需要 在 各 个 字段 上 分 别 设置 onblur 处 理 程序 。 
2. allTags[i].onblur = fieldCheck; 
当 用 户 离开 必须 填写 的 字段 时 ， 字 段 上 的 这 个 事件 处 理 程序 会 调用 fieldCheck() KX 
3. function fieldCheck() { 
if (this.value == "") 


this.className += " highlight"; 
this. focus(); 














else { 
this.className = "reqd"; 
} 


} 

fieldCheck() 函 数 检查 在 当前 字段 中 是 否 输入 了 某 些 信息 。 如 果 这 个 字段 还 没有 值 ， 那 么 通过 将 
"highlight" 添 加 到 它 的 class 属性 上 ， 将 字段 的 背景 闫 色 改 为 浅黄 色 ( 见 图 8-7), 并且 用 focus() 
将 焦点 重新 放 回 这 个 表单 字段 中 。 纠正 了 错误 之 后 , 简单 地 将 class 属性 重新 设置 为 其 初始 值 , 背景 
颜色 就 恢复 为 白色 。 
V 提示 
口 当 用 户 在 改变 字段 之 后 离开 它 时 ， 会 触发 onblur 和 onchange 两 种 事件 。 如 果 用 户 在 没有 改变 
字段 内 容 的 情况 下 离开 ， 就 只 触发 onblur 处 理 程序 。 










































































但 是 Firefox 不 这 么 做 。 但 是 ， 背景 颜色 的 改变 会 提醒 用 户 出 了 错误 ， 所 以 他 们 仍然 知道 这 个 
字段 有 问题 。 
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@ Requiring an entry - Mozilla Firefox [EIE] 





Gc 
|_| Requiring an entry 
Email address: | 


Name (optional): 


File Edit View History Bookmarks Tools Help 


A) Most Visited | | Getting Started à Latest Headlines | | White text 





合 (D) htp//didropbos “Y ~| ($> coc. ] Gr 














Done 























图 8-7 ”如果 用 户 离开 Email address 字段 ,但 是 没有 输入 任何 内 容 ， 那 么 字段 





变 成 黄色 的 并 且 保 持 活跃 ， 直 到 输入 了 数据 为 止 


8.3.7 ”onfocus 事 件 











有 时候， 页 面 上 的 某 个 表单 字段 包含 只 读数 据 ， 这 一 数据 要 在 表单 上 显示 , 但 是 不 希望 用 户 修改 
它 。 可 以 使 用 HTML 属性 readonly 避免 用 户 修改 字段 ,但 是 并 非 所 有 浏览 絮 都 支持 这 个 属性 。 脚 本 














B 





8-20 和 脚本 8-21 演示 如 何 使 用 onfocus 事件 迫使 用 户 离开 这 个 字段 , 从 而 避免 用 户 修改 他 们 不 应 该 修 


改 的 字段 。 


脚本 8-20 这 个 HTML 创建 一 个 表单 ， 其 中 的 电子 邮件 字段 不 允许 修改 


<!DOCTYPE html» 
<html> 
<head> 
<title>Forbidding an entry</title> 
«script src="scripto9.js"></script> 
</head> 
<body> 
<form action="#"> 
<h3> 


Your message: <textarea rows="5" cols="30">Enter your message here </textarea><br><br> 


Will be sent to: <input type="text" 


</h3> 

</form> 
</body> 
</html> 


value="js8@javascriptworld.com" readonly size="25" /> 


脚本 8-21 在 表单 上 使 用 onfocus 处 理 程序 防止 任意 修改 数据 


window.onload = initForm; 


function initForm() { 


var allTags = document.getElementsByTagName("*") ; 


for (var i-0; i«allTags.length; i++) { 
if (allTags[i].readOnly) { 


allTags[i].onfocus = function() { 


this.blur(); 
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Q) allTags[i].onfocus = function() { 
this.blur(); 


} 
当 用 户 试图 进入 这 个 字段 时 , 焦点 ( 本 例 中 是 活动 的 字段 ) 会 立刻 自动 地 转移 ( 见 图 8-8 )。 


这 是 因为 onfocus 事件 处 理 程序 调用 一 个 匿名 函数 ( 没有 名 字 的 函数 ), 这 个 函数 只 做 一 件 事 : 
在 当前 字段 上 调用 blur()， 从 而 使 焦点 转移 。 


eoo Forbidding an entry 











aj D A) A|| +A http: //dl.dropbox.com/u/212748 & [Qr Google 











Enter your message here 


Your message: 


Will be sent to: jss@javascriptworld.com 











or 
图 8-8 ”用户 无 法 在 下 面 的 字段 中 输入 任何 信息 





8.4 键 事件 处 理 


除了 鼠标 之 外 ， 另 一 种 主要 的 输入 设备 是 键盘 。 除 非 以 后 出 现 直接 用 思想 控制 的 计算 机 设备 ， 否 
则 计算 机 还 是 离 不 开 键盘 。 与 鼠标 一 样 ，JavaScript 也 为 处 理 键盘 提供 了 一 些 事件 。 








8.4.1 onkeydown 事 件 


如 果 用 户 能 够 用 键盘 和 鼠标 两 种 方式 控制 网 页 ， 那 么 会 很 方便 。 通 过 使 用 键 事件 处 理 程序 ， 可 以 
在 用 户 按 下 适当 的 键 时 执行 相应 的 操作 。 在 脚本 8-22. 、 脚 本 8-23 和 脚本 8-24 中 ， 通 过 按键 盘 上 的 左 
右 箭头 键 ， 可 以 查看 标准 的 幻灯 片 ( 与 脚本 4-19 中 使 用 的 幻灯 片 相 同 )， 见 图 8-9。 


























Use the right and left arrows on your keyboard to view the slideshow 


























图 8-9 这 个 幻灯 片 由 键盘 控制 ， 而 不 是 由 鼠标 单 击 导 航 按钮 来 控制 
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脚本 8-22 幻灯 片 的 HTML 


<!DOCTYPE html» 
<html> 
<head> 
<title>Image Slideshow</title> 
<link rel="stylesheet" href="script10.css"> 
<script src="script10.js"></script> 
</head> 
<body> 
«h3 class="centered"> 
<img src="images/callisto.jpg" id-"myPicture" alt="Slideshow"><br> 
Use the right and left arrows on your keyboard to view the slideshow 
</h3> 
</body> 
</html> 


脚本 8-23 CSS 再 次 使 图 像 看 起 来 更 好 看 


body { 
background-color: #FFF; 
} 





.centered { 
text-align: center; 
} 


img#myPicture { 
width: 262px; 
height: 262px; 
} 


脚本 8-24 在 这 个 脚本 中 使 用 onkeydown 处 理 程序 执行 幻灯 片 的 切换 


document .onkeydown = keyHit; 
var thisPic = 0; 





function keyHit(evt) { 
var myPix = new Array("images/callisto. jpg", "images/europa.jpg","images/io.jpg", "images/ganymede. jpg"); 
var imgCt = myPix.length-1; 
var ltArrow = 37; 
var rtArrow = 39; 


if (evt) { 

var thisKey = evt.which; 
else { 

var thisKey = window.event.keyCode; 
} 


if (thisKey == ltArrow) { 
chgSlide(-1); 


else if (thisKey == rtArrow) { 
chgSlide(1); 


return false; 


function chgSlide(direction) { 
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thisPic = thisPic + direction; 
if (thisPic > imgCt) { 
thisPic = 0; 


} 
if (thisPic < 0) { 
thisPic = imgCt; 
} 
document. getElementById("myPicture").src = myPix[thisPic]; 


} 
} 


1. document.onkeydown = keyHit; 

XEY keyHit () BUENA onkeydown 事件 处 理 程序 。 

2. var thisPic = 0; 

在 全 局 范围 对 变量 thisPic 进行 初始 化 和 设置 ， 因 此 它 存储 全 局 的 值 ， 在 每 次 调用 keyHit() 时 都 可 
以 使 用 这 个 变量 。 

3. function keyHit(evt) { 

keyHit () PUR PE: RE SEE 

4. var ltArrow - 37; 

var rtArrow - 39; 

左 箭头 键 产生 数字 37， 右 箭头 键 产生 39。 我 们 将 这 些 值 存储 在 变量 中 ， 用 来 判断 用 户 按 下 的 是 
哪个 键 。 

5.if (evt) { 

var thisKey = evt.which; 
































else { 
var thisKey = window.event.keyCode; 


了 解 用 户 按 下 哪个 键 的 方法 取决 于 他 们 使 用 的 浏览 器 .如 果 是 Firefox 或 Safari ,就 查看 evt.which， 
这 个 属性 包含 键 的 编码 。 如 果 是 了 下， 那么 编码 包含 在 window.event. keyCode 中 。 无论 是 哪 种 情况 ， 
都 将 结果 保存 在 thisKey 中 。 
6.if (thisKey == ltArrow) { 
chgSlide(-1); 











else if (thisKey == rtArrow) { 
chgSlide(1); 


如 果 用 户 按 下 左 箭头 键 ， 就 将 约 灯 片 退 后 一 帧 ; 如果 按 下 右 箭 头 键 ， 就 将 约 灯 片 前 进 一 帧 。 如 果 
他 们 按 下 的 是 其 他 键 ， 就 不 执行 任何 操作 。 

7. return false; 

这 一 行 用 来 解决 Safari 浏览 器 中 的 一 个 bug。 其 他 浏览 器 可 以 很 好 地 处 理 前 面 的 代码 ， 但 是 每 次 
按 下 箭头 键 时 ，Safari 会 触发 两 次 击 键 而 不 是 一 次 (这 导致 两 次 触发 onkeydown )。 如 果 返 回 false fË, 
Safari 就 知道 应 该 停止 处 理 这 些 事件 ， 而 其 他 浏览 器 不 会 受到 影响 。 




















172 € 83x 处 理事 件 





w 提示 
O 如 果 不 确定 某 个 键 的 键 值 ， 可 以 在 步 又 5 和 步骤 6 的 代码 行 之 间 加 上 alert(thiskey); ， 然 后 
按 下 你 要 检查 的 键 。 这 个 警告 框 会 显示 键 值 。 

















8.4.2. onkeyup 事 件 


onkeyup 事件 处 理 程序 与 onkeydown 处 理 程序 相同 ， 唯 一 的 差异 是 ， 它 是 在 用 户 已 经 按 下 键 并 日 
在 释放 这 个 键 的 时 候 触发 的 。 
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8.4.3 onkeypress=3 1 
当 用 户 按 下 一 个 键 和 已 经 释放 这 个 键 的 时 候 ， 触 发 onkeypress 事件 。 
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Web 术语 中 ，cookie 是 一 小 段 信息 ， 当 用 户 第 一 次 访问 Web 服务 器 时 ， 服 务 器 将 这 些 信息 
T mun 内 。 这 个 用 户 以 后 每 次 访问 这 个 Web 站 点 时 ，Web 服务 器 可 以 通过 cookie 识别 
这 个 用 户 。 远程 服务 器 保存 cookie 的 一 部 分 , 其 中 包含 关于 访问 者 的 信息 ; 浏览 器 将 cookie 作为 纯 文 
本 文件 保存 在 计算 机 硬盘 上 。 
作为 JavaScript 开发 人 员 ， 你 可 以 用 cookie 做 许多 有 意义 的 事情 。 如 果 你 的 站 点 要 求 注册 ， 那 么 
可 以 用 cookie 将 访问 者 的 用 户 名 和 密码 保存 在 他 们 的 硬盘 上 , 这 样 他 们 就 不 需要 在 每 次 访问 时 都 输入 
用 户 名 和 密码 。 可 以 跟踪 用 户 已 经 访问 过 站 点 的 哪些 部 分 ， 以 及 统计 用 户 的 访问 次 数 。 
关于 cookie 有 许多 常见 的 误解 ， 所 以 一 定 要 知道 cookie 不 能 实现 哪些 操作 : 无 法 获得 关于 用 
户 的 任何 真实 信息 ， 比 如 他 们 的 电子 邮件 地 址 ; 无 法 使 用 cookie 查看 用 户 硬盘 上 的 内 容 ; cookie 
也 无 法 传输 计算 机 病毒 。cookie 只 是 用 户 硬 盘 上 一 个 简单 的 文本 文件 , 可 以 在 其 中 存储 一 些 信息 ， 
仅 此 而 已 。 
cookie 总 是 包含 发 送 它 的 服务 器 的 地 址 。cookie 技术 背后 的 本 质 是 “识别 ”。 可 以 把 它 看 做 Web 
上 的 Caller ID， 只 是 在 形式 方面 有 各 种 变化 一 一 每 个 使 用 cookie 的 Web 站 点 向 用 户 的 浏览 器 授予 某 
种 形式 的 个 性 化 ID, 这 样 在 用 户 下 一 次 访问 这 个 站 点 时 就 能 够 识别 出 他 。 当 用 户 再 次 访问 以 前 向 他 传 
递 过 cookie 的 Web 服务 器 时 ， 服 务 器 可 以 向 浏览 器 进行 查询 ， 了 人 解 这 个 用 户 是 否 拥 有 它 的 cookie. 
如 果 是 ， 服 务 器 就 可 以 获取 原来 传递 的 cookie 中 存储 的 信息 。 请 记 住 ，cookie 只 识别 使 用 的 计算 机 ， 
而 不 识别 使 用 这 台 计 算 机 的 人 。 






















































































9.1 建立 第 一 个 cookie 


cookie 是 一 个 具有 特定 格式 的 文本 字符 串 : 

cookieName=cookieValue; expires= expirationDateGMT; path=URLpath; domain=siteDomain 

这 个 字符 串 的 第 一 部 分 给 cookie 命名 并 给 它 赋值 。 这 是 cookie 中 唯一 必须 有 的 部 分 , 字符 串 的 其 
余部 分 都 是 可 选 的 。 接 下 来 是 cookie 的 过 期 日 期 (expiration date )， 当 到 了 这 个 日 期 浏览 器 会 自动 
删除 这 个 cookie。 过 期 日 期 后 面 是 一 个 URL 路 径 ， 这 人 允许 在 cookie 中 存储 一 个 URL。 最 后 ， 可 以 在 
cookie 中 存储 一 个 域 值 。 

脚本 9-1 中 的 HTML 文件 调用 脚本 9-2 中 的 JavaScript , 它 会 根据 用 户 在 表单 中 输入 的 值 设 置 cookie。 
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在 使 用 这 个 页 面 时 ， 表 面 上 看 不 出 什么 效果 ( 见 图 9-1 )， 但 是 在 幕后 确实 创建 了 cookie。 本 章 后 面 的 
示例 将 在 这 个 示例 的 基础 上 进行 扩展 。 




















Vl) Set a cookie based on a form - Mozilla Firefox 5/8 





File Edit View History Bookmarks Tools Help 
«G » Cc 4d (LÀ). http://wwwijavascriptworid.cor Vy ~| | 是- Google P | 


[5 Seta cookie based on a form | + -| 


Enter your name: {rom ] 


Done 











图 9-1 虽然 在 表面 上 看 不 出 来 ， 但 是 表单 文本 字段 的 内 容 已 经 被 写 人 cookie 中 
脚本 9-1 第 一 个 cookie 页 面 的 HTML 


<!DOCTYPE html» 
<html> 
<head> 
<title>Set a cookie based on a form</title> 
<script src="script01.js"></script> 
</head> 
<body> 
<form id="cookieForm" action="#"> 
«hi»Enter your name: <input type="text" id="nameField"></h1> 
</form> 
</body> 
</html> 


脚本 9-2 ”使 用 这 个 脚本 设置 浏览 器 cookie 


window.onload = nameFieldInit; 
































function nameFieldInit() { 
var userName = ""; 
if (document.cookie != "" 
userName = document.cookie.split("=")[1]; 


document. getElementById("nameField").value = userName; 
document. getElementById("nameField").onblur = setCookie; 
document. getElementById("cookieForm").onsubmit = setCookie; 


function setCookie() { 
var expireDate = new Date(); 
expireDate.setMonth(expireDate. getMonth()+6) ; 


var userName = document.getElementById ("nameField").value; 
document.cookie = "userName=" + userName + ";expires=" + expireDate.toGMTString(); 


document. getElementById("nameField").blur(); 
return false; 
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1. function nameFieldInit() { 
首先 创建 函数 nameFieldInit() 来 定义 cookie 的 值 。 当 窗口 完成 加 载 时 ， 会 调用 这 个 函数 。 


un, 
3 























2. var userName = 


接 下 来 ， 用 一 个 空 值 对 变量 userName 进行 初始 化 。 





3. if (document.cookie != 
userName = document.cookie.split("=")[1]; 


这 个 条 件 测试 检查 document. cookie WA AA HF 2 (E. split ("=") FE cookie 分 隔 成 一 个 数 
组 , 数组 中 第 一 个 元 素 (cookie Field[0] ) 是 cookie 的 名 称 , 第 二 个 元 素 ( cookie Field [1] ) 是 cookie 
的 值 。 注意 , 该 数组 可 以 是 存储 cookie 字段 的 任何 变量 。 这 里 将 document .cookie.split("=")[1] 返 回 
的 值 (也 就 是 cookie 的 值 ) 赋值 给 userName. 

4. document.getElementById("nameField").value = userName; 
如 果 cookie 文件 中 存储 了 一 个 用 户 名 ， 那 么 在 页 面 加 载 时 设置 getElementById ("nameField"). 
value 会 把 这 个 用 户 名 放 进 文本 字段 中 。 

5. document.getElementById("nameField").onblur = setCookie; 

document .getElementById("cookieForm").onsubmit = setCookie; 


在 第 一 行 中 ， 当 用 户 离开 这 个 文本 字段 时 ，onblur 事件 处 理 程序 ( 见 第 1 章 ) 会 调用 setCookie() 
函数 。 在 第 二 行 , 表单 的 onsubmit 事件 处 理 程序 做 同样 的 事情 。 如 果 用 户 在 输入 姓名 后 按 Enter f£, IE 
不 会 触发 onblur 处 理 程序 ( 由 于 某 些 原 因 )。 添 加 onsubmit 处 理 程序 是 为 了 适应 所 有 浏览 

6. function setCookie() { 

现在 创建 一 个 新 函数 setCookie()。 

7. var expireDate = new Date(); 

获得 当前 日 期 并 且 将 它 赋值 给 新 变量 expireDate. 

8. expireDate.setMonth(expireDate.getMonth()+6) ; 

这 一 行 取 出 expireDate 的 月 份 部 分 ,在 月 份 上 加 6, 然后 将 expireDate 的 月 份 部 分 设置 为 新 的 值 。 
换 句 话说 ， 它 将 cookie 的 过 期 日 期 设置 为 创建 cookie 之 后 6 个 月 。 

9. var userName = document.getElementById("nameField").value; 

这 一 行 创 建 一 个 新 变量 userName, JF HH P ECA BTA EZ E . userName 变量 必须 
创建 两 次 〈 每 次 在 不 同 的 函数 中 )， 因 为 它 不 是 全 局 变量 ， 也 就 是 说 ， 可 以 在 每 个 函数 中 使 用 它 ， 但 
是 并 不 指望 跨 函 数 保 持 它 的 值 一 一 在 每 个 函数 中 它 的 值 都 是 新 的 。 
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10. document.cookie = "userName-" + userName + ";expires-" + expireDate.toGMTString(); 
这 里 是 写 cookie 的 地 方 。 请 记 住 ，cookie 仅仅 是 一 个 文本 字符 串 ， 所 以 可 以 使 用 任何 文本 字符 是 
操作 来 建立 cookie， 比 如 使 用 加 号 来 连接 字符 串 。 我 们 设置 document.cookie 以 包含 用 户 名 和 cookie 
过 期 日 期 。toGMTString() 方 法 将 Date 对 象 expireDate 转换 为 文本 字符 串 ， 以 便 将 它 写 人 cookie 中 。 
11. document.getElementById("nameField").blur(); 
return false; 


那么 ， 如 何 设置 表单 ， 从 而 允许 以 两 种 方式 调用 setCookie()? 下 面 是 处 理 这 个 问题 的 方法 。 
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a 如 果 浏 览 咒 是 正 ， 那 么 第 一 行使 焦点 离开 name 字段 ， 从 而 表明 发 生 了 某 些 情 况 。 第 二 行 GR 
回 false (ÉL) 防止 实际 提交 表单 。 

口 如 果 浏 览 器 不 是 正 ， 那 么 第 一 行 没有 任何 作用 (我 们 已 经 离开 了 name 字段 ， 所 以 再 次 离开 它 
不 会 有 影响 )。 第 二 行 防止 触发 表单 提交 。 








多 个 cookie 


可 以 在 一 个 页 面 上 设置 多 个 cookie， 格 式 如 下 : 


"cookieName1=cookieValue1; expiresi-expirationDateGMT1; pathi-sitePath1;domaini-siteDomain1"; 


"cookieName2-cookieValue2; expires2-expirationDateGMT2;path2-sitePath2; domain2-siteDomain2" 


同样 ， 只 有 名 称 和 值 对 是 必须 有 的 字段 。 

split("; ") 命 令 将 多 个 cookie 记录 分 隔 为 数组 ， 各 个 cookie 从 零 开 始 编号 。 注 意 ， 这 个 命令 
中 分 号 后 面 有 一 个 空格 。cookieArray[0] 是 多 个 cookie 记录 中 的 第 一 个 cookie, cookieArray[1]Æ 
下 一 个 cookie， 以 此 类 推 。 更 多 细节 请 参见 本 章 后 面 的 9.6 节 。 


v 提示 

口 这 个 脚本 假设 第 一 个 cookie 包含 用 户 名 。 后 面 的 脚本 将 演示 如 何 处 理 多 个 cookie, 并 且 根 据 名 

称 〈 而 不 是 编号 ) 来 获得 cookie. 

口 本 章 中 的 脚本 具有 特定 的 次 序 , 如 果 你 按照 它们 在 书 中 出 现 的 次 序 运 行 它 们 , 那么 它们 会 正常 
运行 。 但是， 如 果 打 乱 次 序 ， 就 可 能 遇 到 某 些 怪异 的 结果 (比如 ,浏览 器 认为 你 的 姓名 是 一 个 
数字 )。 如 果 和 希望 不 按 次 序 运行 它们 ， 就 应 该 在 脚本 的 各 次 执行 之 间 运 行 脚本 9-7。 


9.2 读 取 cookie 


设置 了 cookie 之 后 , 需要 获得 它 以 便 做 某 些 有 意义 的 事情 。 前 一 个 示例 在 cookie 中 设置 了 文本 字 
FEE Tom. HAAS 9-3 和 脚本 9-4 演示 如 何 从 cookie 中 获得 这 个 值 并 且 将 它 显 示 在 屏幕 上 ( 当然 ,一 般 
情况 下 不 需要 显示 cookie， 这 个 脚本 显示 cookie 只 是 为 了 进行 演示 )。 


脚本 9-3 JavaScript 将 使 用 这 个 HTML 页 面 中 的 id 来 插入 cookie 结 


<!DOCTYPE html» 
<html> 
<head> 
<title>I know your name!</title> 
«script src="script02.js"></script> 
</head> 
<body> 
«hi id-"nameField"»&nbsp;«/hi» 
«/body» 
«/html» 
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脚本 9-4 ”这 个 简短 的 脚本 读 取 前 面 设 置 的 cookie 并 且 将 它 发 送 到 文档 窗口 


window.onload = nameFieldInit; 





function nameFieldInit() { 
if (document.cookie != "") { 
document.getElementById("nameField").innerHTML = "Hello, " + document.cookie.split("=")[1]; 


} 


=> i: HX cookie 


1. if (document.cookie !- "") ( 
确保 document . cookie 对 象 中 的 值 非 空 。 
2. document.getElementById ("nameField").innerHTML = "Hello, " +document.cookie.split("=")[1]; 

















如 果 cookie 非 空 ， 就 向 屏幕 上 写 一 个 文本 字符 Sian a EE CEES 
Ht: "Hello,"( 注 意 逗 号 后 面 有 空格 )， 再 加 上 提取 g Tn A tee a " 
5 x [http://w javascriptworld.com YY -| [$> Google 
出 的 cookie {H ( 见 图 9-2 )。 S mm 
= 
v 提示 Hello, Tom 











口 你 是 否 注意 到 我 们 不 需要 指定 要 读 取 cookie 
文件 中 的 哪个 cookie? 这 是 因为 一 个 cookie 只 
能 由 最 初 写 它 的 服务 器 读 取 。 浏 览 器 内 部 的 
cookie 机 制 不 允许 你 读 或 写 别人 所 写 的 ”i 
cookie。 你 只 能 访问 自己 的 cookie。 9-2 这 个 oookie 提供 了 我 的 姓名 


























9.3 显示 cookie 


在 前 一 个 示例 中 , 我 们 读 取 了 一 个 来 自 服务 器 的 cookie 的 值 。 现 在 , 我 们 看 看 如 何 编 写 一 个 脚本 ， 
让 它 读 取 来 自 你 的 服务 器 的 所 有 cookie ,并 且 显 示 它 们 的 名 称 和 值 . 如 果 没 有 cookie ,脚本 就 显示 There 
are no cookies here ( 见 图 9-3 )。 如 果 有 cookie, 就 将 每 个 cookie 的 内 容 显 示 在 单独 的 行 上 ( 见 图 9-4 )。 

IAS 9-5 演示 具体 做 法 。 































































































@ Cookie Check - Mozilla Firefox eas Ql) Cookie Check - Mozilla Firefox ae) 
File Edit View History Bookmarks Tools Help File Edit View History Bookmarks Tools Help 
- Q X (I htp//wwwjavasciptword.com 7; ~| |$- Google 2 > Q X f | htp//wwwjavasciptword.com YY ~| |$- Google P 
|j Cookie Check [+] Ím L} Cookie Check E 
There are no cookies here Cookie name is 'userName', and the value is 'Tom' 
Don Don 
图 9-3 ”如 果 来 自 你 网 页 所 在 的 服务 器 没 9-4 ”如果 有 一 个 或 多 个 cookie, 那么 脚 


有 cookie， 就 会 看 到 这 个 结果 本 将 它们 写 到 文档 窗口 
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脚本 9-5 ”这 个 脚本 循环 遍历 并 且 显 示 某 个 特定 服务 咒 在 你 的 机 器 上 设置 的 所 有 cookie 


window.onload = showCookies; 


function ee { 


var outMsg = ""; 
if (document.cookie == "") { 

outMsg = "There are no cookies here"; 
} 
else { 


var thisCookie = document.cookie.split("; "); 


for (var i=0; i<thisCookie. length; itt) { 
outMsg += "Cookie name is '" + thisCookie[i].split("-")[0]; 
outMsg += "', and the value is '" + thisCookie[i].split("=") [1] + "'«br»"; 


document. getElementById("cookieData").innerHTML = outMsg; 
} 


> 显示 所 有 的 cookie 








1. var outMsg = 
首先 对 变量 outMsg 进行 初始 化 ， 这 个 变量 将 包含 我 们 要 显示 的 消息 。 
2. if (document.cookie == "") { 

outMsg = "There are no cookies here"; 


个 条 件 测 试 的 意思 是 :如 果 document.cookie 是 空 的 ,那么 将 outMsg 设置 为 There are no cookies here. 

3. var thisCookie = document.cookie.split("; "); 

如 果 前 面 的 测试 失败 〈 即 至 少 有 一 个 cookie 存在 )， 那 么 使 用 document. cookie.split("; ") 获 得 
所 有 cookie 的 值 ， 并 且 将 这 些 值 存储 进 数组 thisCookie。 请 记 住 ，split(";“") 命 令 创 建 一 个 包含 所 有 
cookie 的 数组 。 然 后 ， 脚 本 就 能 够 引用 这 个 数组 中 的 每 个 值 。 

4. for (var i=0; i«thisCookie.length; i++) { 

这 一 行 开 始 一 个 循环 ， 首 先 将 计数 器 变量 i MERE. AR. WEHREN "i 小 于 
thisCookie 数组 中 的 cookie 数量 ”。 最 后 将 i 的 值 递 增 1。 


5. outMsg += "Cookie name is '" + thisCookie[i].split("=")[0]); 
outMsg += "', and the value is '" + thisCookie[i].split("=")[1] + "'«br»"); 


在 脚本 遍历 数组 时 , 对 于 每 个 cookie, 它 将 文本 字符 串 "Cookie name is ' "55 A outMsg, 后 跟 cookie 
的 名 称 。 然 后 加 上 文本 字符 串 "' and the value is '"#ll cookie 的 值 。 最 后 ， 在 每 行 的 末尾 加 上 一 个 
HTML 分 隔 符 。 


6. document. a ("cookieData").innerHTML = outMsg; 
在 遍历 所 有 cookie 之 后 ， 变 量 outMsg 已 经 设置 好 了 ， 所 以 通过 innerHTML 将 它 写 到 页 面 上 。 


9.4 使 用 cookie 作为 计数 器 


因为 cookie 是 持久 性 的 ， 也 就 是 说 ， 它 们 可 以 跨 Web 服务 器 和 浏览 需 之 间 的 多 次 会 话 持久 地 存 
在 ， 所 以 可 以 使 用 cookie 存储 特定 用 户 访问 某 个 页 面 的 次 数 。 但是, 这 并 不 是 在 许多 网 页 上 看 到 的 页 


"n, 
3 
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面 计数 需 。 因 为 cookie 是 与 一 个 用 户 相 关联 的 ,所 以 只 能 记录 这 个 用 户 的 访问 次 数 , 不 能 使 用 cookie 
存储 所 有 用 户 访问 这 个 页 面 的 次 数 。 但 是 ， 了 解 如 何 创建 这 样 的 个 人 计数 器 是 有 意义 的 ， 还 可 以 修改 
脚本 9-6 来 完成 其 他 任务 ( 参见 提示 )。 

脚本 9-6 ”这 个 脚本 在 cookie 中 记录 访问 次 数 


window.onload = initPage; 











function initPage() { 
var expireDate = new Date(); 
expireDate.setMonth(expireDate. getMonth()+6) ; 


var hitCt = parseInt(cookieVal ("pageHit")); 
hitCt++; 


document.cookie = "pageHit=" + hitCt + ";expires=" + expireDate.toGMTString(); 
document.getElementById("pageHits").innerHTML = "You have visited this page " + hitCt + " times."; 
} 


function cookieVal(cookieName) { 
var thisCookie = document.cookie.split("; "); 


for (var i=0; i«thisCookie.length; i++) { 
if (cookieName == thisCookie[i].split("-")[0]) { 
return thisCookie[i].split("-")[1]; 
} 


} 


return 0; 


} 
=> 使 用 cookie 作为 计数 器 


1. var expireDate = new Date(); 











expireDate.setMonth(expireDate.getMonth()+6) ; 

这 两 行 与 9.1 节 中 的 步骤 7 和 步骤 8 相同 。 请 参见 那里 的 解释 。 

2. var hitCt = parseInt(cookieVal("pageHit")); 

字符 串 pageHit 是 这 个 cookie 的 名 称 。 在 后 面 的 步骤 中 ， 你 会 看 到 cookieVal() MAINA. 3X 
一 行 从 cookieVal() 获 得 cookie 的 名 字 ， 并 且 用 parseInt() 方 法 将 它 转换 为 数字 ， 然 后 将 结果 存储 进 
变量 hitCt。parseInt() 方 法 将 一 个 字符 串 (cookie 中 的 值 ) 转换 为 数字 C 用 作 计 数 器 的 值 )。 

3. hitCt++; 

现在 将 hitct 的 值 加 1， 从 而 递增 计数 器 。 

4. document.cookie = "pageHit=" + hitCt + ";expires=" + expireDate.toGMTString(); 

这 行 代码 将 更 新 后 的 信息 写 回 cookie。 写 人 的 内 容 是 一 个 文本 字符 串 ， 其 中 包括 字符 虽 
"pageHit="、 递 增 后 的 hitct 值 、";expires=" 和 过 期 日 期 (这 个 日 期 在 步骤 1 中 设置 为 当前 日 期 后 的 6 


ATH S 


5. document.getElementById("pageHits").innerHTML -"You have visited this page " + hitCt + ' 
—times."; 


这 一 行 在 文档 窗口 中 显示 用 户 消息 ( 见 图 9-5). 在 "page" 后 面 和 "times" 前 面 有 额外 的 空格 , 这 会 
使 消息 在 屏幕 上 看 起 来 意义 更 明确 。 
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6. function cookieVal(cookieName) { 
这 一 行 创建 新 函数 cookieVal()。 需 要 癌 它 传递 一 些 数据 ， 在 函数 中 可 以 用 变量 cookieName 引用 











(@ How many times have you been here before? - Mozilla Firefox eos 
File Edit View History Bookmarks Tools Help 
pc Ay [LÀ httpi//www.javascriptworld.com YY ~| |$- Google P 


|j How many times have you been here... | + 


You have visited this page 4 times. 














Done 


图 9-5 ”页面 指 出 我 们 已 经 访问 了 它 4 次 ,真是 难以 置信 








7.var thisCookie = document.cookie.split("; "); 

将 变量 thisCookie 设置 为 split("; ") 方 法 生成 的 数组 。 

8. for (var i=0; i«thisCookie.length; i++) { 

现在 开始 一 个 循环 ， 这 与 9.3 节 中 的 步骤 4 相同 。 

9. if (cookieName == thisCookie[i].split("-")[0]) { 

这 个 条 件 语 句 检查 cookieName 是 否 与 cookie 数组 中 的 第 工 个 元 素 的 名 称 相同 。 
10. return thisCookie[i].split("=")[1]; 

如 果 步 又 9 中 的 测试 成 功 了 ， 那 么 返回 cookie 的 值 。 

11. return 0; 


如 果 检 查 了 数组 中 的 所 有 元 素 ， 但 是 没有 找到 匹配 ， 就 返回 0 值 。 





























VY 提示 

O 当 对 调用 这 个 脚本 的 HTML 页 面 进行 加 载 时 ， 在 浏览 器 中 单 击 Reload 按钮 就 会 看 到 计数 器 
递增 。 

O 如 前 所 述 , 可 以 修改 脚本 9-6 来 完成 其 他 任务 。 一 种 可 能 性 是 使 用 cookie 记录 特定 用 户 上 一 次 





访问 你 站 点 的 时 间 , 并 且 根 据 这 个 时 间 显 示 不 同 的 页 面 。 例 如 , 有 些 在 线 杂 志 有 一 个 封面 页 面 ， 

其 中 显示 艺术 图 像 和 当天 的 新 闻 标题 。 如 果 用 户 在 24 小 时 内 多 次 访问 这 个 站 点 ， 那 么 他 们 只 会 

在 第 一 次 看 到 封面 页 面 ， 后 续 的 访问 会 将 用 户 直 接 转 到 站 点 的 目录 页 面 。 

口 如 果 你 需要 真正 的 页 面 访问 计数 器 , 即 显 示 所 有 用 户 加 载 某 个 页 面 的 总 次 数 的 计数 器 , 那么 需 
要 在 Web 服务 器 上 安装 一 个 计数 器 程序 。 可 以 向 你 的 Web 主机 托管 公司 询问 他 们 是 否 提供 计 
数 器 功能 ， 也 可 以 在 搜索 引擎 中 搜索 “Web page hit counter”。 



























































9.5 删除 cookie 


有 时 候 ， 你 希望 删除 cookie 记录 中 的 一 个 或 多 个 cookie。 这 非常 容易 ， 一 种 效果 很 好 的 技术 是 ， 
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将 cookie 的 过 期 日 期 设置 为 过 去 的 某 个 日 期 ， 这 会 让 浏览 器 自动 地 删除 它 。 脚 本 9-7 演示 如 何人 迫使 


cookie 马上 过 期 。 
脚本 9-7 这 个 脚本 删除 cookie 


window.onload = cookieDelete; 


function cookieDelete() { 
var cookieCt = 0; 


if (document.cookie != "" && confirm ("Do you want to delete the cookies?")) { 
var thisCookie = document.cookie.split("; "); 
cookieCt = thisCookie. length; 


var expireDate = new Date(); 
expireDate.setDate(expireDate.getDate()-1); 


for (var i=0; i«cookieCt; i++) ( 
var cookieName - thisCookie[i].split("-")[0]; 


document.cookie = cookieName + "=;expires=" + expireDate.toGMTString(); 























} 

} 

document. getElementById("cookieData").innerHTML = "Number of cookies deleted: " + cookieCt; 
} 
=> 删除 Cookie 
1. var cookieCt = 0; 
这 个 脚本 要 记录 我 们 已 经 删除 了 多 少 个 cookie， 所 以 首先 创建 cookieCt 变量 并 且 将 它 设置 为 零 。 
2. if (document.cookie != "" && confirm("Do you want to delete the cookies?")) { 

测试 表明 cookie 是 空 的 ， 




















这 个 测试 首先 确保 cookie 不 包含 空 值 , 也 就 是 说 , 存在 一 些 cookie, 如 果 测 
那么 脚本 就 不 进行 任何 操作 。 测 试 的 第 二 部 分 让 浏览 器 弹出 一 个 确认 对 话 框 ， 其 中 显示 函数 调用 中 的 
文本 ( 见 图 9-6 )。 如 果 confirm() 返 回 true, 我 们 就 知道 用 户 希 望 删除 他 们 的 cookie, 如 果 返 回 false, 


就 跳 到 步骤 9。 




















@ Delete those cookies ec D ~O v Page + 








Message from webpage 





o Do you want to delete the cookies? 





























图 9-6 每 当 你 要 删除 任何 东西 时 ， 都 要 让 用 户 进 行 确 认 ， 这 是 一 种 良好 的 界面 设计 习惯 
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3. var thisCookie = document.cookie.split("; "); 
这 一 行 用 split(";“") 方 法 将 cookie 的 内 容 分 隔 成 数组 ， 并 且 将 这 个 数组 赋值 给 变量 thisCookie. 
4. cookieCt = thisCookie.length; 
我 们 现在 知道 将 要 删除 多 少 个 cookie， 所 以 将 这 个 值 存储 在 cookieCt 中 。 
5. var expireDate = new Date(); 

expireDate.setDate(expireDate. getDate()-1); 
这 里 创建 一 个 新 的 日 期 对 象 expireDate， 然 后 将 它 设 置 为 当前 日 期 减 1 一 一 换 名 话说， 就 是 昨天 。 
6. for (var i=0; i«cookieCt; i++) { 
现在 开始 一 个 for 循环 ， 这 样 就 可 以 删除 所 有 cookie， 而 不 只 是 一 个 。 首 先 将 i WE, 
只 要 i 小 于 cookie 的 数量 ， 就 将 i 递增 1。 
7.var cookieName = thisCookie[i].split("-")[0]; 
使 用 split("=")[0] 获 得 数组 中 第 i 个 cookie 的 名 称 ， 然 后 将 它 存储 在 变量 cookieName o 
8. document.cookie = cookieName + "=;expires=" + expireDate.toGMTString(); 
这 里 将 修改 后 的 过 期 日 期 写 回 cookie 中 。 


9. document.getElementById("cookieData").innerHTML = "Number of cookies deleted: "+ cookieCt; 
脚本 现在 已 经 离开 了 for 循环 ， 这 一 行将 已 经 删除 的 cookie 数量 写 到 HTML 文档 中 ( 见 图 9-7 )。 


















































@ Delete those cookies - Internet Explorer provi lel 

@ Delete th kies - Internet Explorer provided by Dell [EIS] 
GO se [E norme. >] B [+] x | [lO Bing 9 -| 
File Edit View Favorites Tools Help 

jy Favorites — | @@ Delete those cookies fo B+ & od ~ Pager Seey- >” 





Number of cookies deleted: 2 





Done 














@ Internet | Protected Mode: On fay %100% ~ 








图 9-7 用 户 也 应 该 获得 已 经 发 生 的 事件 的 反馈 





w 提示 
O 在 本 书 以 前 的 版 本 中 ， 如 果 没 有 cookie 存在 ,或 者 用 户 取 消 了 删除 ， 那 么 这 个 脚本 不 会 显示 


任何 东西 ,现在 ,将 innerHTML 设置 为 一 个 值 , 所 以 在 这 两 种 情况 下 也 会 显示 已 经 删除 的 cookie 
数量 ( 总 是 零 )。 








9.6 ”处 理 多 个 cookie 


例 重用 了 9.4 节 中 的 大 量 代 码 。 


Ale, Ale, 


常常 希望 同时 处 理 多 个 cookie， 脚 本 9-8 演示 如 何 读 取 多 个 cookie 并 且 显 示 其 中 的 信 








息 。 这 个 示 
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脚本 9-8 在 一 个 脚本 中 使 用 数组 处 理 多 个 cookie 


window.onload = initPage; 


function initPage() { 
var now = new Date(); 
var expireDate = new Date(); 
expireDate.setMonth(expireDate.getMonth()46); 


var hitCt - parseInt(cookieVal ("pageHit")); 
hitCt++; 


var lastVisit = cookieVal("pageVisit"); 
if (lastVisit == 0) { 
lastVisit = ""; 


} 
document.cookie = "pageHit=" + hitCt + ";expires=" + expireDate.toGMTString(); 
document.cookie = "pageVisit=" + now + ";expires=" + expireDate.toGMTString(); 
var outMsg = "You have visited this page " + hitCt + " times."; 
if (lastVisit != "") { 

outMsg += "«br»Your last visit was " + lastVisit; 
} 


document. getElementById("cookieData").innerHTML = outMsg; 
} 


function cookieVal(cookieName) { 
var thisCookie = document.cookie.split("; "); 


for (var i=0; i«thisCookie.length; i++) { 
if (cookieName == thisCookie[i].split("=")[0]) { 
return thisCookie[i].split("=")[1]; 





} 
} 


return 0; 


} 

> 处 理 多 个 cookie 

l. var lastVisit = cookieVal("pageVisit"); 

首先 将 字符 串 pageVisit 传递 给 cookieval() 函 数 ， 从 而 寻找 名 为 pageVisit 的 cookie。 它 返回 一 人 
然后 将 这 个 值 存储 在 lastVisit 中 。 
2. if (lastVisit == 0) { 


lastVisit = ""; 


} 
如 果 lastVisit 的 值 是 零 ， 就 将 空 值 放 进 lastVisit。 我 们 现在 知道 这 个 用 户 以 前 没有 访问 过 这 里 。 























Ei 








3. document.cookie = "pageHit=" + hitCt + ";expires-" + expireDate.toGMTString(); 
document.cookie = "pageVisit=" + now + ";expires=" + expireDate.toGMTString(); 
这 两 行将 两 个 cookie 写 回 硬盘 ， 其 中 的 信息 包括 更 新 后 的 单 击 次 数 和 访问 时 间 。 











4.var outMsg = "You have visited this page " + hitCt + " times."; 


if (lastVisit !- "") { 
outMsg += "<br>Your last visit was 


+ lastVisit; 
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outMsg 变量 存储 要 向 站 点 访问 者 显示 的 消息 。 其 中 的 第 一 部 分 显示 用 户 的 访问 次 数 。 后 面 几 行 检 





查 用 户 以 前 是 否 访问 过 这 个 页 面 CU) 
的 时 间 。 














be, lastVisit 是 否 非 空 )， 如 果 访 问 过 ， 就 显示 他 上 一 次 访问 


5. document. getElementById("cookieData").innerHTML = outMsg; 





最 后 , outMsg 显示 在 屏幕 上 , 告诉 用 户 以 前 他 访问 这 个 页 面 的 情况 。 这 个 脚本 的 结 














见 图 9-8。 





@ Handling more than one cookie - Internet Explorer provided by Dell [EHE] 








QOO [e v» java... ~| 3] | x || o Bing pr 





File Edit View Favorites Tools 








wr Favorites | @ Handling more than on... 


fuo B+ & ode v page Safety 








You have visited this page 4 times. 
Your last visit was Sat Apr 9 20:26:05 PDT 2011 


Done @ Internet | Protected Mode: On fa v 100% ~ 
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可 以 使 用 cookie 和 JavaScript 提醒 经 党 访问 站 点 的 用 户 注意 他 们 没 看 到 过 的 内 容 。 这 会 向 访问 你 
站 点 的 用 户 提供 更 个 性 化 的 体验 ,让 站 点 显得 更 聪明 、 更 友好 。 如 果 通 过 cookie 发 现 一 些 内容 是 在 访 
问 者 上 次 访问 之 后 添加 的 ,那么 脚本 9-9、 脚 本 9-10 和 脚本 9-11 就 在 这 些 行 的 前 面 添加 一 个 小 的 New! 
图 像 ( 见 图 9-9 )。 同 样 ， 这 里 的 许多 代码 与 本 章 前 面 的 示例 相似 。 
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New for You 








Negrino and Smith's most recent books: 


" JavaScript: Visual QuickStart Guide, 8th Edition 





Dreamweaver CS5: Visual QuickStart Guide 

















图 9-9 JavaScript TE cookie 中 查询 | 

















j 户 上 一 次 访问 的 时 间 ， 并 且 标 出 新 内 容 





脚本 9-9 这 个 页 面 的 HTML 将 下 一 个 脚本 的 结果 应 用 于 页 面 


<!DOCTYPE html» 
<html> 
<head> 
«title»New for You</title> 


<link rel="stylesheet" href="script07.css"> 


<script src="script07.js"></script> 
</head> 


<body> 


<p>Negrino and Smith's most recent books:</p> 
«p id="New-20110801"><a href="http: //www. javascriptworld.com">JavaScript:Visual QuickStart Guide, 
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—8«sup»th «/sup» Edition</a></p> 
«p id-"New-20100601"»«a href-"http://www.dreamweaverbook.com"»Dreamweaver CS5: Visual QuickStart 
—Guide</a></p> 

</body> 

</html> 


脚本 9-10 CSS 与 JavaScript 和 HTML 相 结合 ， 可 以 产生 个 性 化 的 内 容 


body { 
background-color: #FFF; 
} 


p.newImg { 
padding-left: 35px; 
background-image: url(images/new. gif) ; 
background-repeat: no-repeat; 


脚本 9-11 这 个 脚本 可 以 提醒 用 户 注意 新 内 容 ， 从 而 使 站 点 更 加 个 性 化 


window.onload = initPage; 





function initPage() { 
var now = new Date(); 
var lastVisit = new Date(cookieVal("pageVisit")); 
var expireDate - new Date(); 
expireDate.setMonth(expireDate.getMonth()+6) ; 
document.cookie = "pageVisit=" + now + ";expires= 
var allGrafs = document.getElementsByTagName("p"); 


* expireDate.toGMTString(); 


for (var i-0; i«allGrafs.length; i++) ( 
if (allGrafs[i].id.indexOf("New-") !- -1) { 
newCheck(allGrafs[i],allGrafs[i].id.substring(4)); 
} 
} 


function newCheck(grafElement,dtString) { 
var yyyy = parseInt(dtString.substring(0,4),10); 
var mm = parseInt(dtString.substring(4,6),10); 
var dd - parseInt(dtString.substring(6,8),10); 
var lastChgd = new Date(yyyy,mm —1,dd); 


if (lastChgd.getTime() » lastVisit.getTime()) ( 
grafElement.className += " newImg"; 
} 
} 
} 


function cookieVal(cookieName) { 
var thisCookie = document.cookie.split("; "); 


for (var i=0; i<thisCookie.length; i++) { 
if (cookieName == thisCookie[i].split("-")[0]) { 
return thisCookie[i].split("-")[1]; 
} 
} 


return "1 January 1970"; 
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1.p.newImg { 
padding-left: 35px; 
background-image:url(images/new. gif) ; 
background-repeat: no-repeat; 











在 脚本 9-10 中 ， 对 于 页 面 上 具有 newImg 类 的 段落 (在 <p> 标 签 中 )， 我 们 使 用 CSS 在 左边 添加 35 
WIA WUE (padding )， 并 且 将 New! 图 像 放 在 背景 中 。 但 是 ， 因 为 内 边 距 确保 段落 内 容 的 前 面 是 空 
的 ， 所 以 这 个 图 像 看 起 来 不 像 是 背景 图 像 ， 而 是 段落 内 容 前 面 的 一 个 标志 。 

2.«p id="New-20110801"><a href= "http://www.javascriptworld.com">JavaScript: VisualQuick 


>Start Guide, 8<sup>th</sup>Edition</a></p> 
<p id="New-20100601"><a href="http://www.dreamweaverbook.com">Dreamweaver CS5: Visual 
—QuickStart Guide</a></p> 


在 脚本 9-9 中 ,这 两 个 段落 上 的 id 属性 将 所 包含 日 期 告诉 JavaScript ( 稍 后 我 们 将 会 看 到 )，Java- 
Script 将 这 些 日 期 与 后 面 步骤 中 建立 的 信息 进行 比较 。 
3.var lastVisit = new Date (cookieVal("pageVisit")); 


var expireDate = new Date(); 
expireDate.setMonth(expireDate.getMonth()+6) ; 


在 脚本 9-11 中 , 这 些 代 码 对 lastVisit fil expireDate 日 期 进行 初始 化 。 第 一 个 是 cookie 中 保存 的 
访问 者 上 一 次 访问 站 点 的 日 期 ， 第 二 个 是 重 写 cookie 时 将 使 用 的 过 期 日 期 。 


































































































4. document.cookie = "pageVisit=" + now + ";expires=" + expireDate.toGMTString(); 

这 一 行 写 cookie， 它 将 当前 日 期 写 到 pageVisit 中 ,将 expireDate 的 值 写 到 expires 中 。 

5. var allGrafs = document.getElementsByTagName("p") ; 

这 一 行 创建 一 个 包含 页 面 上 所 有 <p> 元 素 的 数组 ， 这 样 就 可 以 遍历 它们 ， 逐 一 寻找 我 们 要 处理 
元 素 。 

6. for (var i-0; i«allGrafs.length; i++) { 

这 里 ， 开 始 一 个 对 数组 进行 遍历 的 循环 ， 依 次 检查 每 个 段落 元 素 。 

7.if (allGrafs[i].id.indexOf("New-") != -1) { 

如 果 这 个 段落 具有 一 个 包含 文本 New- 的 id 属性 ,我们 就 知道 这 是 要 关注 的 段落 ， 所 以 要 执行 以 
下 操作 。 

8. neuCheck(allGrafs[i], allGrafs[i].id.substring(4)); 

我 们 要 检查 这 个 段落 是 否 是 这 个 访问 者 没 看 过 的 。newCheck() 函数 执行 这 个 检查 ， 传 递 给 它 的 参 
数 有 两 个 : 当前 的 段落 元 素 Callorafs[i]) 和 id 属性 的 第 二 部 分 。substring() 从 字符 串 中 提取 出 第 
五 个 字符 到 末尾 的 子 字符 串 。 因 为 它 是 我 们 在 此 所 关心 的 一 切 ， 所 以 我 们 也 将 只 传输 这 一 切 。( 请 记 
住 ，JavaScript 字符 串 中 的 字符 是 从 零 开 始 编号 的 ， 所 以 字符 串 中 的 第 五 个 字符 在 位 置 4 上 。 ) 

9. function newCheck(grafElement, dtString) { 

这 个 函数 需要 传递 进 两 个 参数 ， 这 两 个 参数 在 函数 内 部 称 为 grafElement ( 段落 元 素 ) 和 dtString 
(id 属性 的 第 二 部 分 ) 。 
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var mm = parseInt(dtString.substring(4,6),10); 
var dd = parseInt(dtString.substring(6,8),10); 


这 三 行 代码 从 字符 串 中 解析 出 日 期 。 例 如 ，“20060901” 就 是 2006 年 9 月 1 日 。 

yyyy 变量 存储 前 4 位 (从 第 0 位 开始 ， 到 第 4 位 前 面 结束 )， 结 果 是 “2006”。mm 变量 存储 第 4 
位 和 第 5 位 , dd 变量 存储 第 6 位 和 第 7 位 。 在 每 种 情况 中 都 对 结果 应 用 parseInt() ,从 而 将 substring() 
返回 的 值 转换 为 整数 。 


10. var yyyy = parseInt(dtString.substring(0,4),10); 


























KF substring() 的 更 多 信息 
substring(to,from) 命 令 返 回 一 个 字符 串 中 从 to 位置 开 始 , 到 from 位 置 前 面 结束 的 字符 ( 字符 
从 零 开始 编号 )。 所 以 ， 如 果 字 符 串 包含 “20060807”， 而 你 希望 获得 第 5 个 和 第 6 个 字符 ， 就 要 
使 用 substring(4,6)， 结 果 是 字符 串 “08”。 
from 参数 是 可 选 的 。 如 果 省 略 它 ， 就 表示 要 获得 从 to 位置 开始 到 末尾 的 所 有 字符 。 


11. var lastChgd = new Date(yyyy, mm-1, dd); 

因为 已 经 获得 了 年 、 月 和 日 ， 所 以 可 以 设置 lastChgd。 但 是 ， 等 一 下 ! JavaScript 的 日 期 格式 比 
较 古怪 ， 必 须 将 月 份 减 1 才能 得 到 正确 的 结果 一 一 请 记 住 ， 只 将 月 份 减 1， 对 于 年 和 日 不 要 这 么 做 。 
实际 上 ， 月 份 是 基于 零 的 ， 而 年 和 日 是 基于 1 的 。( 关于 日 期 及 其 古怪 的 更 多 信息 ， 请 参考 第 11 章 。) 

12. if (lastChgd.getTime() > lastVisit.getTime()) ( 

现在 ， 可 以 对 两 个 日 期 进行 比较 。 只 有 在 最 后 修改 页 面 信息 的 日 期 晚 于 访问 者 上 次 访问 的 日 期 的 
情况 下 ， 才 执行 以 下 操作 。 

13. grafElement.className += " newImg"; 

这 里 是 核心 部 分 : 我 们 知道 这 个 段落 应 该 显示 New! 图 像 。 所 以 在 这 个 <p> 标 签 中 添加 一 个 class 
属性 newImg，HTML 页 面 中 声明 的 样式 就 会 自动 应 用 于 这 个 段落 ， 因 此 会 显示 图 像 。 

也 就 是 说 ， 我 们 可 以 使 用 JavaScript 在 元 素 中 添加 属性 及 其 相关 联 的 值 。 在 这 个 示例 中 ， 元 素 是 
<p>， 属 性 是 class， 属 性 值 是 newImg。 因 为 元 素 可 能 已 经 有 了 class 属性 ， 这 行 代码 会 添加 属性 值 ， 
而 不 是 覆盖 当前 的 值 。 

添加 了 这 个 新 属性 之 后 ,会 立即 触发 浏览 絮 的 呈现 引擎 ， 自 动 地 将 样式 应 用 于 这 个 元 素 ， 从 而 使 
图 像 出 现 。 


14. function cookieVal(cookieName) { 
var thisCookie = document.cookie.split("; "); 





































































































for (var i=0; i«thisCookie.length; i++) { 
if (cookieName == thiscookie|i] s lit("-")[0]) { 
return thisCookie[i].split("=" e 


return "1 January 1970"; 


} 
这 是 我 们 已 经 熟悉 的 cookieVal() 函 数 。 这 里 的 唯一 差异 是 ， 如 果 没 有 找到 名 字 指 定 的 cookie, € 
会 返回 “1 January 1970”， 而 不 是 零 。 这 会 简化 其 他 地 方 的 代码 。 这 是 JavaScript 能 够 识别 的 最 早 的 
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日 期 ， 所 以 其 他 日 期 都 应 该 晚 于 这 个 日 期 。 这 个 日 期 并 不 向 用 户 显示 ， 它 只 是 JavaScript 内 部 引用 的 
日 期 。 
v 提示 
O 你 可 能 更 熟悉 只 向 parseInt() 传 递 一 个 参数 的 调用 方式 。 但 是 , 这 里 传递 了 两 个 参数 : 要 转换 
的 字符 串 和 10。 最 后 一 个 参数 让 parseInt() 总 是 返回 十 进 制 的 数字 。 如 果 不 这 么 做 , 那么 在 把 
以 0 开头 的 字符 串 传 递 给 parseInt() 时 ， 它 可 能 把 结果 转换 为 八进制 ， 这 会 产生 错误 的 结果 。 
在 这 种 情况 下 , 调用 parseInt("09") 和 parseInt("09",10) 会 返回 不 同 的 结果 , 而 后 者 才 是 我 们 
需要 的 。 这 只 是 你 需要 了 解 的 JavaScript 的 怪 脾 气 之 一 。 
































对 象 和 DOM 











W: 建议 符合 标准 的 浏览 器 采用 节点 操纵 (node manipulation ) 的 方式 支持 网 页 ， 使 页 面 表 
现 得 更 像 应 用 程序 ， 而 不 是 一 般 的 标准 静态 页 面 。 例如， 可 以 让 页 面 在 不 与 服务 器 进行 通 
信和 的 情况 下 ,根据 用 户 输入 的 内 容 发 生 改 变 ， 以 及 在 脚本 的 控制 下 更 新 页 面 。 尽 管 可 以 像 本 书 中 其 他 
地 方 所 做 的 那样 ， 使 用 innerHTML 这 样 的 技术 ， 但 是 在 本 章 中 我 们 将 讲解 官方 支持 的 方式 。 节 点 操纵 
也 可 以 用 服务 器 端 CGI 来 实现 ,但 是 如 果 要 提供 这 个 功能 , 同时 又 不 必 人 迫使 用 户 在 页 面 之 间 不 断 移 动 ， 
那么 只 能 使 用 JavaScript。 

在 本 章 中 ， 你 将 学 习 一 些 关 于 节点 和 DOM 的 知识 ， 添 加 、 删 除 和 操作 特定 的 节点 ， 以 及 在 页 面 
上 插入 和 替换 节点 。 


10.1 天 于 市 点 操纵 
本 章 是 本 书 中 探索 JavaScript 和 DOM 最 深入 的 一 章 ， 所 以 我 们 首先 需要 讨论 一 下 历史 和 术语 。 















































10.1.1 DOM 2 和 W3C 


W3C ( 见 第 1 章 中 的 介绍 ) 发 布 了 规范 来 规定 浏览 器 应 该 如 何 处 理 文档 对 象 模型 ( Document 
Object Model, DOM )。DOM Level 2 规范 于 2000 年 11 月 成 为 正式 推荐 标准 ， 它 更 深入 地 规定 了 浏览 
需 应 该 如 何 引用 和 管理 页 面 上 的 内 容 。 可 以 在 http:/www.w3.org/TR/DOM-Level-2-Core/ 上 找到 这 个 规 
TN EAA 

尽管 这 个 规范 已 经 发 布 好 几 年 了 , 但 是 当前 使 用 的 许多 浏览 器 仍然 只 具有 不 完整 的 DOM 2 支持 。 
在 使 用 本 章 中 的 脚本 之 前 ， 要 确保 目标 受众 能 够 运行 它们 ， 或 者 为 老式 浏览 器 提供 实现 同样 效果 的 替 
代 方 法 。 好 消息 是 ， 当 今 的 大 多 数 网 上 冲浪 者 都 使 用 IE. 8+, Firefox, Chrome 或 Safari, ， 而 这 些 浏览 器 
都 能 够 很 好 地 运行 这 些 脚 本 。 
























































10.1.2 DOM 2 术语 


在 本 书 的 开头 ， 我 们 将 JavaScript 称 为 “组 合式 (snap-together) 语言 ”， 因 为 可 以 将 对 象 、 属 性 
和 方法 组 合 在 一 起 来 构建 出 JavaScript 应 用 程序 。 还 有 一 种 看 待 HTML 页 面 的 方式 : 将 它 看 做 由 节点 
(node) 组 成 的 树 结构 。 例 如 ， 下 面 这 个 简单 的 HTML 页 面 : 
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<html> 
<head> 
«title»My page</title> 
</head> 
<body> 
<p>This is text on my page</p> 
</body> 
</html> 


可 以 看 做 图 10-1 所 示 的 结构 。 








"This is text 
on my page" 








图 10-1. 这 个 由 节点 组 成 的 树 结 构 只 是 看 待 HIML 页 面 组 织 方式 的 另 一 种 方法 


可 以 使 用 JavaScript 修改 这 个 树 结构 的 任何 方面 ， 包 括 添加 、 访 问 、 修 改 和 删除 树 中 的 节点 。 这 
个 树 中 的 每 个 框 都 是 一 个 节点 。 如 果 一 个 节点 包含 HTML 标签 ， 那么 它 就 称 为 元 素 节 点 (element 
node )。 否 则 ， 它 称 为 文本 节点 ( text node )。 当 然 ， 元 素 节 点 可 以 包含 文本 节点 。 











10.1.3 DOM 3 


DOM Level 3 于 2004 年 4 月 成 为 正式 推荐 标准 。 关 于 这 个 规范 的 信息 ， 可 以 在 www.w3.org/ 
TR/DOM-Level-3-Core/ 找 到 。 与 W3C 过 程 的 许多 部 分 一 样 ， 仍 然 要 再 过 很 长 时 间 在 浏览 器 中 才 会 出 
现 真正 的 支持 。 所 以 本 章 只 讨论 DOM 2. 但是, 如 果 你 有 兴趣 了 解 更 多 情况 , 那么 可 以 从 ECMAScript 
bindings 开始 ( www.w3.org/TR/DOM-Level-3-Core/ecma-script-binding.html )。 
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10.2 添加 节点 


学 习 节 点 最 容易 的 方法 , 是 首先 在 文档 末尾 追加 一 个 元 素 节 点 ( 它 将 包含 一 个 文本 节点 ) 脚本 10-1 
和 脚本 10-2 让 用 户 输入 一 些 数据 并 且 单 击 一 个 按钮 ， 然 后 将 一 个 新 段落 添加 到 页 面 中 ( 见 图 10-2 )。 


脚本 10-1 这 个 HTML 创建 一 个 文本 区 域 和 一 个 提交 按钮 ， 让 用 户 能 够 添加 文本 节点 


<!DOCTYPE html» 
<html> 
<head> 
<title>Adding Nodes</title> 
<script src="script01.js"></script> 
</head> 
<body> 
<form action="#"> 
<p><textarea id-"textArea" rows="5"cols="30"></textarea></p> 
<input type="submit" value="Add some text to the page"> 
</form> 
</body> 
</html> 


脚本 10-2 这 个 脚本 使 用 户 可 以 将 任何 文本 添加 到 页 面 上 
window.onload = initAll; 


function initAll() { 
document .getElementsByTagName("form") [0].onsubmit = addNode; 
} 


function addNode() { 
var inText = document.getElementById ("textArea").value; 
var newText - document.createTextNode (inText); 























var newGraf - document.createElement ("p"); 
newGraf.appendChild(newText); 

var docBody = document.getElementsByTagName("body") [0]; 
docBody . appendChild(newGraf); 


return false; 























} 
@ Adding Nodes - Mozilla Firefox [E177] @ Adding Nodes - Mozilla Firefox 
File Edit View History Bookmarks Tools Help File Edit View History Bookmarks Tools Help 
FE G 4 (L http//didropboxcom/ v. -| [SH e P| ©- G- Q X 4 (LÙ htp//didropboxcom/ YY - | | 
局 Most Visited | Getting Started à Latest Headlines | | White text P, Most Visited | | Getting Started à Latest Headlines | | White text 
| C Adding Nodes Ld : [=|] | | c Adding Nodes kd [-| 
from the kitchen. I got up to ^ from the kitchen. I got up to ^ 
look, but didn't find look, but didn't find 


anything. Later, Dori p anything. Later, Dori T 
discovered that it was the L discovered that it was the L 
sound of a rubber chicken 3 sound of a rubber chicken | 


hitting the floor. - hitting the floor. - 
Add some textto the page iAdd some textto the page: 


Last night, we were watching TV when I heard an odd sound from the kitchen. I got 
up to look, but didn't find anything. Later. Dori discovered that it was the sound of a 
rubber chicken hitting the floor. 


























Done - 7 ie Done 
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K 10-2 ”在 字段 中 输入 文本 ， 然 后 单 击 按钮 ( 左 网 ) ， 就 可 以 添加 一 个 节点 。 这 些 文本 
会 出 现在 页 面 上 AR ) 
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=> 添加 节点 











1. var newText = document.createTextNode(inText); 
首先 ， 使 用 createTextNode() 方 法 创建 一 个 新 的 文本 节点 ( 名 为 newText )， 它 将 包含 在 textArea 
中 找到 的 文本 。 
2. var newGraf = document.createElement("p"); 
接 下 来 ,使 用 createElement() 方 法 创建 一 个 新 的 元 素 节点 。 尽 管 这 里 创建 的 节点 是 一 个 段落 标签 ， 
但 它 也 可 以 是 任何 HTML Ri (div, span, 等 等 )。 这 个 新 元 素 的 名 称 是 newGraf。 
3. newGraf.appendChild(newText); 
为 了 将 新 文本 添加 到 新 段落 中 , 我们 必须 调用 appendChild()。 这 是 newGraf 元 素 的 一 个 方法 , 将 
newText 传递 给 它 时 ， 就 会 将 文本 节点 放 进 段落 中 。 
4. var docBody = document.getElementsByTagName("body") [0] ; 
为 了 将 新 节点 添加 到 文档 的 body 中 ， 需 要 查 明 body 的 位 置 。 这 个 getElementsByTagName() 7714: 
会 给 出 页 面 上 的 每 个 body 标签 。 如 果 页 面 符合 标准 , 那么 应 该 具有 一 个 body 标签 。[0] 属 性 是 第 一 个 
body 标签 ， 我 们 将 它 存储 在 docBody 中 。 
5. docBody.appendChild(newGraf); 
最 后 , 将 newGraf 追加 到 docBody 中 ( 同样 使 用 appendChild() ), 从 而 将 用 户 输入 的 新 文本 放 到 页 面 上 。 
v 提示 
O 既然 对 innerHTML 进 行 简 单 的 赋值 就 可 以 实现 同样 的 效果 ， 那 么 为 什么 要 这 么 费事 儿 ( 创建 文 
本 节点 、 创 建 元 素 节 点 并 且 追 加 子 节点 ) 呢 ? 有 一 个 原因 : 利用 这 种 方式 ， 就 不 可 能 导致 页 务 
无 效 。 例 如 ， 添 加 的 每 个 <p> 或 cdiv> 标 签 会 自动 结束 。 另 一 方面 ， 如 果 使 用 innerHTML ， 就 非常 
容易 形成 无 效 的 标签 ( 简直 太 容 易 了 ) 一 旦 发 生 这 种 情况 , 页面 的 DOM 就 很 难处 理 了 。 例 如 ， 
如 果 一 个 元 素 有 开始 标签 ， 而 没有 结束 标签 ， 那 么 就 无 法 读 取 这 个 元 素 的 内 容 。 
O 段落 本 身 不 能 再 包含 段落 。 如 果 你 试图 传人 多 个 用 空 行 分 隔 的 句子 , 这 段 代码 将 把 它们 合并 成 
一 个 大 段 ， 而 不 是 分 别 解析 每 一 段 。 


10.3 ”删除 节点 


如 果 你 希望 在 页 面 上 添加 内 容 ， 那么 也 可 能 希望 从 页 面 中 删除 内 容 。 脚 本 10-3 (HTML ) 和 脚本 
10-4 删除 页 面 上 的 最 后 一 个 段落 ， 如 图 10-3 所 示 。 


脚本 10-3 这 个 脚本 添加 一 个 用 来 删除 文本 节点 的 链接 〈 而 不 是 按钮 ) 


<!DOCTYPE html» 
<html> 
<head> 
<title>Deleting Nodes</title> 
«script src="script02.js"></script> 
</head> 
<body> 
<form action="#"> 
«p»«textarea id-"textArea" rows="5" cols="30"></textarea></p> 
<input type="submit" value="Add some text to the page"> 
</form> 
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«a id-"deleteNode" href="#">Delete last paragraph</a> 
«/body» 
</html> 


脚本 10-4 现在， 用 户 既 可 以 添加 文本 ， 也 可 以 删除 文本 


window.onload = initAll; 


function initAll() { 
document.getElementsByTagName("form") [0].onsubmit = addNode; 
document .getElementById("deleteNode").onclick = delNode; 


function addNode() { 
var inText = document.getElementById ("textArea").value; 
var newText = document.createTextNode (inText); 


var newGraf - document.createElement ("p"); 
newGraf.appendChild(newText); 


var docBody = document.getElementsByTagName( "body" ) [0]; 
docBody . appendChild(newGraf); 


return false; 


function delNode() { 
var allGrafs = document.getElementsByTagName("p"); 


if (allGrafs.length » 1) ( 
var lastGraf - allGrafs.item (allGrafs.length-1); 
var docBody = document.getElementsByTagName("body") [0] ; 
docBody . removeChild(lastGraf); 


else ( 
alert("Nothing to remove!"); 


return false; 





























@ Deleting Nodes - Internet Explorer provided by Dell [eT @ Deleting Nodes - Internet Explorer provided by Dell eo >=) 
OO [e noraao-. -| 8 |* [x ][t sing pr OO- [ett dldro +] 3] +] x | [t Bing pr 
File Edit View Favorites Tools Help | File Edit View Favorites Tools Help 

sir Favorites | $5 ig] Bookmarklets sip Favorites | 933 £) Bookmarklets 

@ Deleting Nodes | i ~O mh v Pagew Safety ” | @ Deleting Nodes l th > D E v Pager Safety v 

years. Not that I ever = years. Not that I ever a 

imagined that I would be imagined that I would be 

writing this phrase, but my , writing this phrase, but my — 

rubber chicken broke. E 


rubber chicken broke. 


1 




















1 js Add some textto the page 
Delete last paragraph Delete last paragraph 
Last night, we were watching TV when I heard an odd sound from the kitchen. I Last night, we were watching TV when I heard an odd sound from the kitchen. I 
got up to look, but didn’t find anything. Later, Dori discovered that it was the got up to look, but didn’t find anything. Later, Dori discovered that it was the 
sound of a rubber chicken hitting the floor. sound of a rubber chicken hitting the floor. 
Like so many other people, I keep a rubber chicken hanging in my kitchen. The 
one that's in there now is quite old; I"ve probably had it for 20 years. Not that I 
ever imagined that I would be writing this phrase, but my rubber chicken broke. 
@ Internet | Protected Mode: On £g Q10% ~ @ Internet | Protected Mode: On av 100% v 




















图 10-3 ”这 个 页 面 上 的 最 后 一 个 段落 需要 修改 ( 左 图 ) , 所 以 可 以 使 用 Delete last paragraph 
链接 删除 它 〈 右 图 ) 
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> 删除 节点 


1. var allGrafs = document.getElementsByTagName("p"); 

这 一 行使 用 getElementsByTagName 方法 收集 页 面 上 的 所 有 段落 标签 , 并 且 将 它们 存储 在 allGrafs 
数组 中 。 

2. if (allGrafs.length > 1) { 

在 进行 实际 的 删除 操作 之 前 ， 首 先 必须 检查 allorafs 数组 的 长 度 是 否 大 于 1。 我 们 不 希望 尝试 删 
除 某 些 并 不 存在 的 东西 , 而 且 数 组 的 长 度 总 是 至 少 为 1( 因为 脚本 10-3 中 的 textarea 表单 字段 放 在 一 
个 <p> 标 签 中 )。 

3. var lastGraf = allGrafs.item(allGrafs.length-1); 

如 果 有 段落 ,那么 以 数组 长 度 减 1 作为 数组 索引 来 获得 最 后 一 个 段落 。 请 记 住 ， 长 度 是 从 1 开始 
的 ， 而 数组 索引 是 从 0 开始 的 ， 所 以 数组 长 度 减 1 就 可 以 获得 页 面 上 的 最 后 一 个 段落 。 

4. var docBody = document.getElementsByTagName( "body") [0]; 

docBody . removeChild(lastGraf); 
du p pu T pe 


































































































方法 并 且 将 lastaraf 传递 给 它 ， 这 告诉 JavaScript 我 们 希望 删除 哪个 段落 。 在 页 面 上 ,会 立刻 显示 少 
了 一 个 段落 。 
w 提示 


口 同样 , 也 可 以 删除 段落 之 外 的 其 他 元 素 节 点 。 为 此 , 只 需 修改 脚本 , 向 getElementsByTagName() 
传递 其 他 非 p 标签 名 称 。 


10.4 删除 特定 的 节点 


尽管 总 是 删除 最 后 一 个 段落 可 能 是 有 意思 的 , 但 是 有 时 候 希 望 删除 不 在 页 面 末 尾 的 段落 。 脚 本 10-5 
(HTML ) 和 脚本 10-6 使 我 们 的 代码 更 加 灵活 ， 让 用 户 能 够 选择 要 删除 的 段落 ， 见 图 10-4 和 图 10-5。 


脚本 10-5 单 选 按 钮 让 访问 者 选择 是 添加 文本 ， 还 是 删除 文本 


<!DOCTYPE html> 
<html> 
<head> 
<title>Deleting Selected Nodes</title> 
<script src="script03.js"></script> 
</head> 
<body> 
<form action="#"> 
<p><textarea id-"textArea" rows="5"cols="30"></textarea></p> 
<p><label><input type="radio" name="nodeAction">Add node</label> 
<label><input type="radio" name="nodeAction">Delete node</label></p> 
Paragraph #: <select id="grafCount"></select> 
<input type="submit" value="Submit"> 
</form> 
<div id="modifiable"> </div> 
</body> 
</html> 
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脚本 10-6 这 个 脚本 让 用 户 能 够 选择 要 删除 的 段落 


window.onload = initAll; 
var nodeChgArea; 





function initAll() { 
document .getElementsByTagName("form")[0].onsubmit = nodeChanger; 
nodeChgArea = document. getElementById("modifiable") ; 

} 


function addNode() { 
var inText = document.getElementById("textArea").value; 
var newText = document.createTextNode(inText) ; 


var newGraf = document.createElement("p"); 
newGraf.appendChild(newText); 


nodeChgArea. appendChild(newGraf); 
} 


function delNode() { 
var grafChoice = document.getElementById("grafCount").selectedIndex; 
var allGrafs = nodeChgArea.getElementsByTagName("p"); 
var oldGraf - allGrafs.item(grafChoice); 


nodeChgArea. removeChild(oldGraf); 
j 


function nodeChanger() { 
var actionType - -1; 
var pGrafCt - nodeChgArea.getElementsByTagName("p") . length; 
var radioButtonSet = document.getElementsByTagName(" form") [0] .nodeAction; 


for (var i=0; i«radioButtonSet.length; i++) ( 
if (radioButtonSet[i].checked) { 
actionType - i; 





} 


switch(actionType) { 
case 0: 
addNode() ; 
break; 
case 1: 
if (pGrafCt » 0) ( 
delNode(); 
break; © Add node O Delete node 





} 
default: Paragraph # vV 1 | (Submit ) 
alert("No valid action was chosen"); g 


} We make a 一 what we get, 
5 


If you do na 2ason she will 





document .getElementById("grafCount").options.length = 0; 











for (i=0; i«nodeChgArea.getElementsByTagName("p").length; i++) { 图 10-4 在 添加 节点 之 后 ， 
document. getElementById("grafCount").options[i] = new Option(i+1); Paragraph ### tH 3% 

} ^F LL AN 
单 包含 段落 号 的 


return false; 


; 列表 
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ane Deleting Selected Nodes eoo Deleting Selected Nodes 
[it [> | La LA] LEO np://dt.dropbox.com/u/2127486/;svass;. © | (Qr Coogle J| Hose EAT AJ LEO hp://d.dropbox.com/u/2127486/jsvass! © | (Ar Google J 
O Add node @ Delete node O Add node @ Delete node 
Paragraph #: (Submit ) Paragraph #: ( 1 1$) (Submit 
We make a living by what we get, we make a life by what we give. - Sir Winston Churchill We make a living by what we get, we make a life by what we give. - Sir Winston Churchill 
If you do not hear reason she will rap you on the knuckles. - Benjamin Franklin If you do not hear reason she will rap you on the knuckles. - Benjamin Franklin 
Truth is what stands the test of experience. - Albert Einstein Crime does not pay ... as well as politics. - Alfred E. Newman 
Crime does not pay ... as well as politics. - Alfred E. Newman Ihave never let my schooling interfere with my education. - Mark Twain 
I have never let my schooling interfere with my education. - Mark Twain 
= = — 4 A 
i 、 、 E v Ex JL 
图 10-5 首先， 选中 Delete node 单 选 按钮 ， 然 后 从 弹出 菜单 中 选择 要 删除 的 段落 
ThA MEE JU ^E: H Jt 
( 左 图 )。 单 击 Submit 按钮 就 会 删除 选择 的 段落 ( 爱 因 斯 坦 的 一 段 话 )， 








下 面 的 段落 会 向 上 移动 AK ) 


> 删除 特定 节点 








1. nodeChgArea = document.getElementById("modifiable"); 

因为 HTML 页 面 现在 有 多 个 段落 ， 所 以 不 容易 跟踪 哪些 段落 可 以 删除 ， 哪 些 不 可 以 删除 。 所 以 ， 
我 们 建立 一 个 全 新 的 区 域 : 一 个 id X modifiable 的 div。 在 这 里 , 将 全 局 变量 nodeChgArea 设置 为 这 
个 元 素 节 点 。 


2. var grafChoice = document.getElementById("grafCount").selectedIndex; 




















var allGrafs = nodeChgArea.getElementsByTagName("p"); 
var oldGraf = allGrafs.item (grafChoice) ; 
当 用 户 选择 进行 段落 删除 时 , 他 们 还 必须 选择 要 删除 的 段落 。 我们 从 grafCount 字段 读 取 段落 号 ， 
F 且 将 它 存储 在 grafChoice 中 。 然 后 ， 将 allGrafs 变量 设置 为 nodeChangingArea 中 的 所 有 段落 ， 并 
将 要 删除 的 段落 存储 在 oldGraf 中 。 
3. nodeChgArea. removeChild(oldGraf) ; 
这 个 步骤 与 前 一 个 示例 中 相同 ， 唯 一 的 差异 是 : 当 它 运行 时 ,我 们 会 看 到 页 面 中 间 的 某 个 段落 消 
失 了 。 
v 提示 
口 你 理解 其 他 代码 的 作用 有 困难 吗 ? nodeChanger() 函数 按 出 现 的 次 序 组 合 了 脚本 2-15 、 脚 本 6-5 
和 脚本 6-13 的 功能 。 在 程序 设计 中 ， 一 种 非常 常见 的 做 法 是 ， 建 立 一 个 由 简单 例 程 组 成 的 库 ， 
然后 根据 需要 ， 将 它们 组 合成 更 复杂 的 完整 程序 。 
口 注意 , 在 前 面 的 代码 中 , 我 们 在 以 前 使 用 docBody 的 地 方 使 用 了 nodeChgArea 一 一 在 操作 节点 时 ， 
很 容易 将 代码 改 为 处 理 其 他 元 素 节 点 。 在 这 里 , 我 们 只 搜索 页 面 的 一 部 分 而 不 是 整个 页 面 , 但 
是 总 体 方法 是 相同 的 。 
O 我 们 也 可 以 不 把 nodeChgArea 声 明 为 全 局 变量 并 且 在 initAl1() 中 对 它 进行 初始 化 ， 而 是 在 使 用 
它 的 每 个 函数 中 局 部 地 创建 和 初始 化 它 。 这 两 种 方式 各 有 优 缺 点 。 在 这 里 , 我 们 选用 全 局 方式 ， 
这 样 我 们 就 不 必 多 次 对 它 进 行 初始 化 。 











mox 
















































































10.5 ”插入 节点 197 





10.5 插入 节点 


除了 删除 不 在 文档 中 末尾 处 的 节点 之 外 ， 
使 用 脚本 10-7 (HTML ) 和 脚本 10-8, 可 ea 
入 新 节点 。 


eoo Inserting Nodes 


A) a ] [D ntp://dl.dropbox.com/u/2 «> v | | (49> Coogle 


You may delay, but time will 
not. - Benjamin Franklin 


能 希望 在 文档 末尾 之 外 的 其 他 位 置 添加 节点 。 通 过 
点 出 现在 哪里 。 在 图 10-6 中 , 可 以 看 到 如 何 揪 








eoo Inserting Nodes. 


v |G] (88> Google 





@) (a) (8 


2) [ej (=) 





4) | [D ntp://dl.dropbox.com/u/2 

















You may delay, but time will 
not. - Benjamin Franklin 





O Add node QDelete node @ Insert before node 


Paragraph #: ( 1 [ij (Submit 


O Add node QDelete node @ Insert before node 


Paragraph #: 


3) Gubmit 


Inspiration does exist, but it must find you working. - Pablo Picasso 
Ignorance is never better than knowledge. - Enrico Fermi 
Man invented language to satisfy his deep need to complain. - Lily Tomlin 


Learning is not attained by chance. It must be sought for with ardor and attended 


Inspiration does exist, but it must find you working. - Pablo Picasso 
Ignorance is never better than knowledge. - Enrico Fermi 
You may delay, but time will not. - Benjamin Franklin 


Man invented language to satisfy his deep need to complain. - Lily Tomlin 


to with diligence. - Abigail Adams mm " i 
Learning is not attained by chance. It must be sought for with ardor and attended 
Envy is the ulcer of the soul. - Socrates to with diligence. - Abigail Adams 


Envy is the ulcer of the soul. - Socrates 























图 10-6 SUE AERA, Huh Insert before node 单 选 按钮 ， 
( 左 图 ) ， 输 入 文本 ， 然 后 单 击 Submit 按钮 CAR ) 


脚本 10-7 男 一 个 单 选 按 钮 和 一 些 脚 本 修改 提供 了 第 三 个 选项 一 一 在 男 一 个 段落 前 面 插 入 文本 


<!DOCTYPE html> 
<html> 
<head> 
<title>Inserting Nodes</title> 
<script src-"script04.js"»«/script» 
</head> 
<body> 
<form action="#"> 
<p><textarea id-"textArea" rows="5" cols="30"></textarea></p> 
<p><label><input type="radio" name="nodeAction">Add node</label> 
<label><input type="radio" name="nodeAction">Delete node</label> 
<label><input type="radio" name="nodeAction">Insert before node</label></p> 
Paragraph #: «select id="grafCount"></select> 
<input type="submit" value-"Submit"» 


选择 作为 插入 点 的 段落 





n 


</form> 
<div id="modifiable"> </div> 
</body> 
</html> 
脚本 10-8 ”用户 现在 可 以 在 页 面 上 的 任何 地 方 添加 文本 


window.onload = 
var nodeChgArea; 


initAll; 


function initAll() { 
document.getElementsByTagName("form")[0].onsubmit - 


nodeChanger; 
nodeChgArea - document.getElementById("modifiable"); 


function addNode() { 





198 %10% 5$ DOM 
var inText = document.getElementById("textArea").value; 
var newText = document.createTextNode(inText); 
var newGraf - document.createElement("p"); 
newGraf.appendChild(newText); 
nodeChgArea. appendChild(newGraf); 
} 


function delNode() { 


var grafChoice = document.getElementById("grafCount").selectedIndex; 
var allGrafs = nodeChgArea.getElementsByTagName("p") ; 
var oldGraf = allGrafe. itengrafChoice) 


nodeChgArea. removeChild(oldGraf) ; 


function insertNode() { 


var grafChoice = document.getElementById("grafCount").selectedIndex; 
var inText = document.getElementById("textArea").value; 


var newText = document.createTextNode(inText) ; 
var newGraf = document.createElement("p"); 
newGraf.appendChild(newText) ; 


var allGrafs = nodeChgArea.getElementsByTagName("p"); 
var oldGraf = alicrafs.itentgrafchoice), 


nodeChgArea. insertBefore(newGraf ,oldGraf) ; 


function nodeChanger() { 


var actionType = -1; 
var pGrafCt = nodeChgArea.getElementsByTagName("p") . length; 
var radioButtonSet = document.getElementsByTagName("form")[0].nodeAction; 


for (var i-0; i«radioButtonSet.length; i++) ( 
if (radioButtonSet[i].checked) { 
actionType - i; 


) 


switch(actionType) { 
case 0: 
addNode() ; 
break; 
case 1: 
if (pGrafCt » 0) ( 
delNode(); 
break; 


case 2: 

if (pGrafCt » 0) ( 
insertNode(); 
break; 


} 
default: 
alert("No valid action was chosen"); 


document .getElementById("grafCount").options.length = 0; 
for (i=0; i<nodeChgArea.getElementsByTagName("p").length; i++) { 


document. getElementById("grafCount").options[i] = new Option(i+1); 


return false; 
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ES 
1. var grafChoice = document.getElementById("grafCount").selectedIndex; 
var inText = document.getElementById("textArea").value; 
为 了 搬入 一 个 段落 ,我们 需要 知道 两 个 信息 : 用 户 希 望 插入 段落 的 位 置 ( grafChoice ) 以 及 他 们 
希望 插入 的 文本 C inText ). 


2. var newText = document.createTextNode(inText); 

















var newGraf = document.createElement("p"); 
newGraf.appendChild(newText); 
这 是 创建 新 的 段落 节点 并 且 以 用 户 文本 填充 它 的 标准 方法 。 
3. var allGrafs = nodeChgArea.getElementsByTagName("p") ; 
var oldGraf = allGrafs.item(grafChoice); 
同样 ， 我 们 收集 区 域 中 的 所 有 p 标签 ， 然 后 将 目标 段落 ( 我们 将 在 这 个 段落 前 面 插入 新 段落 ) 存 
储 在 oldGraf 中 。 
4. nodeChgArea.insertBefore(newGraf,oldGraf); 
插入 新 节点 的 方法 是 调用 insertBefore() 方 法 并 且 传递 两 个 参数 : 新 节点 和 一 个 现 有 的 节点 (新 
节点 要 搬入 在 这 个 节点 前 面 )。 
Vv 提示 
O 你 可 能 会 认为 ， 既 然 有 insertBefore() 方 法 ， 就 应 该 有 insertAfter() 方 法 , 但 并 非 如 此 。 如 
果 希 望 在 页 面 末尾 添加 节点 ， 就 需要 使 用 appendChild() 方 法 。 


10.6 ”替换 节点 


可 以 删除 现 有 节点 并 且 插 入 新 节点 , 但 是 直接 替换 节点 更 简单 。 脚 本 10-9 C HTML ) 和 脚本 10-10 
演示 如 何 用 一 个 节点 蔡 换 男 一 个 节点 。 图 10-7 显示 替换 的 效果 。 

























































































@ Replacing Nodes - Mozilla Firefox Sex) @ Replacing Nodes - Mozilla Firefox [EI] 
File Edit View History Bookmarks Tools Help File Edit View History Bookmarks Tools Help 
: > Q X f (LI np//didropboxc v. -| |$- Googe P | Gr 四 一 SX A (D) hp//adropboxc vy. -| SE- Google P ] E 
| |} Replacing Nodes +| - | |} Replacing Nodes Le] [~ 
We are all here for a spell; We are all here for a spell; 
get all the good laughs you get all the good laughs you 
can. - Will Rogers can. - Will Rogers 
© Add node © Delete node © Insert before node © Replace node © Add node © Delete node © Insert before node © Replace node 
Paragraph & [3] ~ Paragraph #: 1 ~ Submit 
Be sincere, be brief, be seated. - Franklin Roosevelt Be sincere, be brief, be seated. - Franklin Roosevelt 
Three may keep a secret, if two of them are dead. - Benjamin Franklin Three may keep a secret, if two of them are dead. - Benjamin Franklin 
Eighty percent of success is showing up. - Woody Allen We are all here for a spell; get all the good laughs you can. - Will Rogers 
You can only be young once. But you can always be immature. - Dave Barry You can only be young once. But you can always be immature. - Dave Barry 
One half of the world cannot understand the pleasures of the other. - Jane Austen One half of the world cannot understand the pleasures of the other. - Jane Austen 
| Done Ii Done 














图 10-7 在 这 里 ， 我 们 将 第 三 个 段落 (AE) BAIIA AR ) 
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脚本 10-9. 这 个 HTML 页 面 在 前 面 示例 的 基础 上 添加 了 Replace node 单 选 按 钮 
<!DOCTYPE html> 
<html> 
<head> 


<title>Replacing Nodes</title> 
<script src="script05.js"></script> 


</head> 
<body> 


<form action="#"> 


«p»«textarea id-"textArea" rows="5" cols="30"></textarea></p> 
<p><label><input type="radio" name="nodeAction">Add node</label> 
<label><input type="radio" name-"nodeAction"»Delete node</label> 
<label><input type="radio" name-"nodeAction"»Insert before node</label> 
<label><input type="radio" name= "nodeAction">Replace node</label></p> 
Paragraph #: <select id="grafCount"></select> 

<input type="submit" value="Submit"> 


</form> 
<div id="modifiable"> </div> 


</body> 
</html> 


脚本 10-10 





最 终 ， 用 户 可 以 在 页 面 上 添加 、 删 除 和 替换 任何 文本 











window.onload = initAll; 
var nodeChgArea; 


function initAll() { 
document .getElementsByTagName("form")[0].onsubmit = nodeChanger; 
nodeChgArea = document.getElementById("modifiable"); 


function addNode() { 
var inText = document.getElementById("textArea").value; 
var newText = document.createTextNode(inText) ; 


var newGraf = document.createElement("p"); 
newGraf.appendChild(newText); 


nodeChgArea. appendChild(newGraf) ; 


} 


function delNode() { 
var grafChoice = document.getElementById("grafCount").selectedIndex; 
var allGrafs = nodeChgArea.getElementsByTagName("p") ; 
var oldGraf = allGrafs.item(grafChoice) ; 


nodeChgArea. removeChild(oldGraf) ; 


function insertNode() { 
var grafChoice = document.getElementById("grafCount").selectedIndex; 
var inText = document.getElementById("textArea").value; 


var newText = document.createTextNode(inText) ; 
var newGraf = document.createElement("p"); 
newGraf.appendChild(newText); 


var allGrafs = nodeChgArea.getElementsByTagName("p") ; 
var oldGraf = allGrafs.item(grafChoice) ; 


nodeChgArea. insertBefore(newGraf ,oldGraf) ; 
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function replaceNode() { 
var grafChoice = document.getElementById("grafCount").selectedIndex; 
var inText = document.getElementById("textArea").value; 


var newText = document.createTextNode(inText) ; 
var newGraf = document.createElement("p"); 
newGraf.appendChild(newText); 


var allGrafs = nodeChgArea.getElementsByTagName("p") ; 
var oldGraf - allGrafs.item(grafChoice); 


nodeChgArea. replaceChild(newGraf,oldGraf); 
j 


function nodeChanger() { 
var actionType - -1; 
var pGrafCt - nodeChgArea.getElementsByTagName("p") . length; 
var radioButtonSet = document.getElementsByTagName(" form") [0] .nodeAction; 


for (var i-0; i«radioButtonSet.length; i++) ( 
if (radioButtonSet[i].checked) { 
actionType - i; 


} 


switch(actionType) { 
case 0: 
addNode() ; 
break; 
case 1: 
if (pGrafCt > 0) { 
delNode(); 
break; 


case 2: 
if (pGrafCt > 0) { 
insertNode() ; 
break; 





case 3: 
if (pGrafCt > 0) { 
replaceNode(); 
break 


} 
default: 
alert("No valid action was chosen"); 
document .getElementById("grafCount").options.length = 0; 
for (i=0; i<nodeChgArea.getElementsByTagName("p").length; i++) { 
document. getElementById("grafCount").options[i] = new Option(i+1); 


return false; 


LJ nodeChgArea. replaceChild(newGraf,oldGraf) ; 
这 个 脚本 中 只 有 这 一 行 是 你 需要 注意 的 新 代码 ( 对 脚本 其 余部 分 的 解释 见 本 章 前 面 的 小 节 )。 
按照 与 前 一 他 相 似 的 方式 ， 我 们 只 需 用 两 个 参数 调用 replaceChild() : 要 替换 进 页 面 的 节点 和 
要 被 蔡 换 掉 的 节点 。 
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10.7 用 对 象 字面 值 编写 代码 


正如 后 面 的 补充 内 容 “ 关 于 对 象 字面 值 ” 所 述 ， 编 写 JavaScript 的 方法 不 只 一 种 。 脚 本 10-11 演 
示 如 何 把 脚本 10-10 改写 为 使 用 对 象 字 面值 。 


脚本 10-11 这 个 简短 的 脚本 演示 对 象 字面 值 的 许多 特性 


window.onload = initAll; 
























































function initAll() { 
document .getElementsByTagName("form")[0].onsubmit = nodeChanger; 
chgNodes . init(); 


function nodeChanger() ( 
return chgNodes.doAction(); 


var chgNodes - ( 
actionType: function() ( 
var radioButtonSet = document.getElementsByTagName("form") [0] .nodeAction; 
for (var i-0; i«radioButtonSet.length; i++) { 
if (radioButtonSet[i].checked) i 
return i; 


return -1; 


3 


allGrafs: function() { 
return this.nodeChgArea.getElementsByTagName("p"); 


) 


pGrafCt: function() ( 
return this.allGrafs().length; 


3 


inText: function() { 
return document.getElementById("textArea").value; 


, 


newText: function() ( 
return document.createTextNode(this.inText()); 


2 


grafChoice: function() { 
return document.getElementById("grafCount").selectedIndex; 


2 


newGraf: function() { 
var myNewGraf = document.createElement("p"); 
myNewGraf .appendChild(this.newText()); 
return myNewGraf; 


b 


oldGraf: function () { 
return this.allGrafs().item(this.grafChoice()); 


了 


doAction: function() { 
switch(this.actionType()) { 
case 0: 
this. nodeChgArea.appendChild(this.newGraf()); 
break; 
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case 1: 
if (this.pGrafCt() > 0) ( 
this.nodeChgArea.remove Child(this.oldGraf()); 
break; 


case 2: 
if (this.pGrafCt() » 0) ( 
this.nodeChgArea.insert Before(this.newGraf(), this.oldGraf()); 
break; 


case 3: 
if (this.pGrafCt() » 0) ( 
this.nodeChgArea.replace Child(this.newGraf(),this.oldGraf()); 
break; 


} 
default: 
alert("No valid action was chosen"); 


document. getElementById("grafCount").options.length = 0; 


for (var i=0; i«this.pGrafCt(); i++) { 
document.getElementById ("grafCount").options[i] = new Option(i+1); 


return false; 


) 


init: function() { 
this.nodeChgArea - document.getElementById("modifiable"); 


关于 对 象 字面 值 
到 目前 为 止 看 到 的 JavaScript 都 是 标准 的 过 程式 JavaScript， 它 们 采用 点 号 表示 格式 : 


var myCat = new Object; 
myCat.name = "Pixel"; 
myCat.breed = "Tuxedo"; 
myCat.website = "www.pixel.mu"; 





function allAboutMyCat() { 
alert("Can I tell you about my cat?"); 
tellMeMore - true; 


} 
如 果 采 用 对 象 字 面值 格式 ， 这 段 代 码 应 该 改写 为 下 面 这 样 : 
var myCat = { 


name: "Pixel", 

breed: "Tuxedo", 

website: "www.pixel.mu", 

allAbout: function() { 
alert("Can I tell you about my cat?"); 
tellMeMore = true; 

} 

} 


对 于 这 两 种 格式 ， 都 可 以 用 点 号 表示 法 引用 myCat 的 属性 ， 比 如 myCat.name。 但 是 ， 在 采用 对 
象 字 面值 格式 时 ， 函 数 变 成 myCat.allAbout() 而 不 是 allAboutMyCat(). 

你 可 能 觉得 这 种 格式 有 点 儿 眼 熟 ， 没 错 ， 它 在 许多 方面 与 CSS 非常 相似 。 在 最 基本 的 层面 上 ， 
它 实际 上 是 一 个 属性 - 值 对 的 列表 ， 属 性 和 值 之 间 以 冒号 分 隔 ， 各 个 属性 - 值 对 之 间 有 一 个 分 隔 符 。 
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在 使 用 对 象 字 面值 时 ， 要 记 住 几 点 差异 。 
口 使 用 :而 不 是 = 设置 属性 。 

口 行 以 ,而 不 是 ;结尾 。 

D 在 对 象 中 的 最 后 一 个 语句 上 不 需要 各 号 。 


> 使 用 对 象 字面 值 











1. document.getElementsByTagName("form")[0].onsubmit = nodeChanger; 
chgNodes.init(); 


与 前 面 看 到 的 代码 一 样 ， 必 须 首 先进 行 初始 化 。 第 一 行 与 以 前 看 到 的 相同 ， 但 是 第 二 行 有 点 儿 不 
一 样 : 它 调用 chgNodes 对 象 中 的 init() AR. 
2. function nodeChanger() { 
return chgNodes.doAction(); 











in = 一 





有 的 nodeChanger () 函数 仅仅 调用 chgNodes.doAction()。 稍 后 解释 为 什么 不 直接 调用 这 个 函数 。 
3. var chgNodes = { 
这 是 chgNodes 对 象 的 开头 。 创 建 对 象 的 方式 与 设置 变量 相似 , 但 是 等 号 后 面 是 包围 在 花 括号 中 的 
一 组 语句 。 
4. actionType: function() { 
var radioButtonSet = document.getElementsByTagName("form")[0].nodeAction; 
for (var i=0; i<radioButtonSet. length; Pe 


if (radioButtonSet[i].checked) { 
return i; 





这 








return -1; 


在 这 个 脚本 的 前 一 个 版 本 中 ，nodeChanger() 函 数 的 第 一 部 分 设置 actionType 变量 。 在 这 里 ， 
actionType() 是 chgNodes 的 一 个 方法 。 尽 管 代 码 风格 不 一 样 ， 但 最 终结 果 应 该 是 相同 的 。 
5. allGrafs: function() { 
return this.nodeChgArea.getElementsByTagName("p") ; 











P 


pGrafCt: function() { 
return this.allGrafs().length; 


这 是 chgNodes 中 的 两 个 简单 函数 : allGrafs() 和 pGrafCt()。 因 为 它们 会 返回 值 ， 所 以 可 以 在 任 
何 地 方 使 用 它们 添加 、 替 换 或 删除 节点 。 


6. doAction: function() { 
switch(this.actionType()) { 
case 0: 
this.nodeChgArea.append Child(this.newGraf()); 
break; 


doAction() ek Uh 3 chgNodes 所 需 的 大 多 数 工作 一 一 这 几 行 代码 只 是 这 个 函数 的 开头 部 分 。 与 前 
个 版 本 一 样 ， 通 过 检查 单 选 按钮 了 解 应 该 执行 哪 种 操作 ， 并 通过 switch 语句 执行 这 个 操作 。 
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7. init: function() { 
this.nodeChgArea = document.getElementById("modifiable"); 



































最 后 是 init() 函 数 ， 它 的 作用 只 是 初始 化 nodeChgArea 供 以 后 使 用 。 最 重要 的 是 ， 在 这 个 例 程 的 末尾 
不 加 逗号 一 一 除了 最 后 一 个 语句 之 外 ， 每 个 语句 都 应 该 以 逗号 结尾 〈 男 数 本 质 上 是 一 个 扩展 的 语句 ) 。 


w 提示 

















O 对 于 步骤 1 和 步骤 2， 你 可 能 会 奇怪 为 什么 不 直接 写成 : document .getElementsByTagName 
("form")[0].onsubmit = chgNodes.doAction(); 还 可 能 会 奇怪 为 什么 在 代码 中 如 此 频繁 地 使 用 
this? 这 两 个 问题 的 答案 是 相同 的 。 

在 对 象 字 面值 中 ， 只 需 通过 引用 this， 就 能 够 引用 这 个 对 象 的 所 有 属性 和 方法 。 如 果 使 用 var 
命令 (就 像 myNewGraf 或 radioButtonSet 那样 ) , 它 就 是 一 般 的 变量 , 不 能 在 父 对 象 之 外 访问 它 。 
如 果 不 使 用 var， 而 且 总 是 以 this.XXX 形式 引用 它们 ， 这 些 属 性 就 成 为 对 象 本 身 的 组 成 部 分 。 

































































但 是 ， 对 象 字面 值 的 this 必须 遵守 JavaScript 对 于 this 的 一 般 规定 一 一 this 引用 的 内 容 取 决 














于 调用 它 的 位 置 。 如 果 从 表单 直接 调用 chgNodes.doAction(), AKA this 引用 的 是 表单 对 象 ， 




















这 不 是 我 们 想 要 的 结果 。 FE nodeChanger() 中 调用 chgNodes.doAction(), 就 能 够 解决 这 个 问题 。 








注意 一 个 到 








BFA: 有 


























O 如 果 你 正在 考虑 放弃 过 程式 JavaScript， 转 而 采用 对 象 字面 值 风格 ， 但 是 还 没有 下 决心 ,那么 请 


NAS 10-11 的 作用 与 脚本 10-10 完全 相同 ， 但 是 它 的 代码 长 度 缩短 了 大 约 20%。 





口 本 章 没有 对 节点 操纵 进行 全 面 的 讨论 , 仅仅 提供 了 一 些 示 例 来 帮助 你 人 门 。 如 果 和 希望 进一步 了 














解 所 有 可 用 的 属性 和 方法 ， 那 么 请 参考 本 章 开 头 提 到 的 W3C 规范 。 


为 什么 要 使 用 对 象 字 面值 


到 目前 为 止 , 你 主要 是 阅读 别人 的 代码 ,如果 阅读 比较 长 的 代码 或 者 由 许多 人 协作 编写 的 代码 ， 
就 很 可 能 遇 到 看 起 来 非常 古怪 的 代码 。 这 很 可 能 是 因为 它们 使 用 对 象 字 面值 ， 这 是 一 种 很 不 一 样 的 
JavaScript 编程 方式 ( 但 是 同样 有 效 ) 。 

程序 员 为 什么 要 使 用 对 象 字 面值 而 不 是 过 程式 方法 来 编写 JavaScript 呢 ? 这 有 以 下 几 个 原因 。 

口 因为 每 个 对 象 ( 包括 方法 和 属性 ) 都 包含 在 一 个 父 对 象 中 ， 所 以 不 会 遇 到 无 意 间 履 盖 别人 

的 代码 的 问题 。 如 果 在 你 和 你 的 同事 各 自负 责 的 .js 文件 中 都 有 一 个 名 为 myText 的 变量 ， 
一 些 页 面 会 加 载 这 两 个 文件 ， 那 么 页 面 后 加 载 的 文件 优先 一 它 会 直接 覆盖 另 一 个 变量 ， 
就 像 根本 没有 加 载 过 原来 的 代码 一 样 。 解 决 方案 是 确保 不 使 用 全 局 变量 ， 而 实现 这 一 点 最 
简单 的 方法 就 是 把 你 的 所 有 代码 都 放 在 一 个 对 象 字面 值 中 。 





O 对 象 字 面值 的 一 个 子 集 被 称 为 JavaScript Object Notation ， 简 称 为 JSON (读音 与 人 名 Jason 
近似 )。JSON 是 Ajax 中 最 常用 的 数据 格式 之 一 , 因此 在 使 用 Ajax 时 经 常会 遇 到 这 种 格式 。 
D 最 后 ， 与 所 有 东西 一 样 ， 编 程 语 言 的 风格 也 在 随 着 潮流 变化 。JavaScript 本 身 正在 经 历 第 二 


次 飞跃 ， 业 界 重新 唤起 了 对 脚本 编程 的 兴趣 。 当 前 的 潮流 倾向 于 使 用 对 象 字 面值 ， 所 以 用 
对 象 字 面值 编写 的 代码 会 越 来 越 多 。 
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建立 动态 页 面 














色 的 网 页 是 许多 不 同 因素 的 综合 结果 ， 包括 引 人 注 目 


比如 加 载 页 面 的 速度 有 多 快 。 加 快 页 画 
方法 之 一 ， 是 在 用 户 的 浏览 器 中 使 用 JavaScript 对 单独 的 页 面 
并 不 直接 向 用 户 提供 页 面体 验 ， 而 是 通过 因特网 发 送 脚本 。 




















的 内 容 、 良 好 的 设计 和 对 细节 的 关注 ， 

















ij 加 载 〈 同 时 仍然 向 用 户 提供 有 趣 的 交互 式 体验 ) 的 
元 素 进行 更 新 。 换 名 话说 ，Web IRI ár 
然后 ， 脚 本 利用 用 户 计算 机 的 能 力 构造 出 











页 面 。 带 有 这 种 脚本 的 页 面 可 以 称 为 动态 页 面 (dynamic page )。 
通过 将 处 理 过 程 从 服务 器 端 转移 到 客户 〈 用 户 ) 端 ， 就 可 以 获得 更 好 的 性 能 并 且 提 供 某 种 程度 的 








个 性 化 用 户 体验 。 

















在 本 章 中 ， 你 将 学 习 如 何 使 用 JavaScript 在 网 页 上 显示 本 地 日 期 和 时 间 ， 用 用 户 所 在 地 的 时 间 对 问 
候 语 进行 定制 ， 在 不 同 的 时 间 格 式 间 转换 ， 以 及 在 脚本 的 控制 下 跨 用 户 的 页 面 移 动 对象 。 


11.1 在 网 页 上 显示 当前 日 期 


JavaScript 可 以 判断 出 计算 机 上 的 当前 日 
但 是 , 脚本 必须 处 理 从 数字 到 文本 型 日 期 的 转换 。 脚 本 11-1 演示 如 何 获得 当前 日 期 , 将 它 从 数字 转换 


为 标准 的 日 期 ， 然 后 将 结果 写 到 文档 窗 





口 。 
































期 和 时 间 ( 以 数字 








EX, 然后 以 许多 方式 操作 这 个 数字 。 





脚本 11-1 这 个 脚本 将 当前 日 期 写 到 文档 窗口 





window.onload = initDate; 
function initDate() { 











var dayName = new Array("Sunday","Monday", "Tuesday", "Wednesday","Thursday", "Friday", "Saturday"); 


var monName = new Array("January" , "February", "March", "April", 


—"October", "November", "December"); 


var now - new Date(); 


var dtString = dayName[now.getDay()] +", " 


document.getElementById("dtField").innerHTML - dtString; 





> 将 当前 日 期 写 到 网 页 


"May","June", "July", "August", "September", 


+ monName[now.getMonth()] + " " + now.getDate(); 








1. window.onload = initDate; 


当 加 载 文档 时 ， 调 用 initDate(). 


2. var dayName = new Array("Sunday", 


> "Saturday") ; 


"Monday", "Tuesday" 


» "Wednesday", "Thursday", "Friday", 
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首先 需要 创建 一 个 新 数组 ， 其 中 包含 一 周 中 日 的 名 称 。 一 定 要 用 逗号 分 隔 数 组 中 的 元 素 ， 而 且 因 
为 它们 是 文本 字符 串 ， 所 以 每 个 元 素 必 须 放 在 引号 中 。 将 这 个 数组 赋值 给 变量 dayName。 
3. var monName = new Array("January", "February", "March", "April", "May", "June", "July", 
—"August", "September", "October", "November", "December") ; 

在 这 一 步 中 ， 创 建 包含 月 份 名 称 的 数组 ， 并 且 将 这 个 数组 赋值 给 变量 monName ; 

4. var now = new Date(); 

然后 ， 让 JavaScript 创建 一 个 新 的 Date 对 象 ， 将 它 命名 为 now， 其 中 包含 当前 日 期 。 

5. var dtString = dayName[now.getDay()] + "," + monName[now.getMonth()] +" "+ now.getDate(); 

以 从 右 到 左 的 次 序 理解 dayName[now.getDay()] 对 象 。getday() 是 用 来 获得 一 周 中 日 的 JavaScript 
TE, Ell now 对 象 询 问 今 天 是 星期 几 。 然 后 ， 用 数字 结果 引用 dayName 数组 中 的 对 应 元 素 。 

接 下 来 ,在 正在 构造 的 文本 字符 串 后 加 上 一 个 逗号 和 一 个 空格 ,再 连接 下 一 个 表达 式 monName[now. 
getMonth()] ， 这 个 表达 式 返回 月 份 名 称 。 与 前 一 个 表达 式 一 样 ， 它 先 获得 月 份 号 ， 然 后 引用 monName 
数组 中 的 对 应 元 素 。 

接 下 来 , 加 一 个 空格 , 最 后 加 上 now.getDate() ， 这 个 方法 返回 月 中 的 日 。 将 整个 字符 串 赋 值 给 dtString 
量 。 

6. document.getElementById("dtField").innerHTML = dtString; 

HTML 页 面 上 的 一 个 <span> 标 签 具 有 id dtField (HTML 非常 简单 ， 所 以 这 里 没有 给 出 )， 如 下 
所 示 : 


«hi»Today is «span id="dtField"> «/span».«/hi» 
JavaScript 将 dtField 元 素 的 innerHTML 属性 设置 为 dtString 的 值 。 结 果 见 图 11-1. 
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(@ Dynamic Date Display - Mozilla Firefox [EET 


Ele Edit View History Bookmarks Tools Help 
B- ec 4 (L http//dldropbo v7. ~| [$8 - coogi P| Gr 


A) Most Visited | | Getting Started A) Latest Headlines White text. 








|| Dynamic Date Display 





Today is Sunday, May 1. 








http://dl.dropbox.com/u/2127486/jsvqs8/ch11/script03.html 














图 11-1 JavaScript 动态 地 在 窗口 中 显示 当前 日 期 








JavaScript 对 时 间 的 处 理 方式 不 一 致 
正如 本 书 前 面 提 到 的 ，JavaScript 在 大 多 数 情 况 下 从 零 开 始 编号 ， 所 以 数字 序列 是 0、1、2、3， 


AE ^ 


等 等 。 但 是 ,日 期 是 从 1 开始 编号 的 。 所 以 ， 如 果 有 一 个 包含 周 中 日 的 数组 ， 就 会 得 到 : 


Sunday = 0 
Monday = 1 
Tuesday = 2 


Wednesday = 3 
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Thursday = 4 
Friday = 5 
Saturday = 6 


同样 ，12 个 月 份 的 编号 是 从 0 到 11 

另 一 方面 ， 在 处 理 月 中 的 日 期 时 ， 从 0 开始 编号 是 没有 意义 的 〈 比 如 ， 不 可 能 说 4 月 0 日 )， 
所 以 JavaScript 对 日 期 从 1 开始 编号 。 

小 时 是 从 0 CAP) 到 23 (晚上 11 0, 3x5 24 小 时 制 是 一 致 的 。 在 本 章 后 面 ， 我 们 会 演示 
如 何 把 24 小 时 制 转换 为 12 小 时 制 。 


11.2 ”处 理 周 中 的 日 期 
如 果 某 一 天 是 周末 ， 你 可 能 希望 向 用 户 显示 不 同 的 消息 。 脚 本 11-2 演示 了 具体 做 法 。 
脚本 11-2 这 个 脚本 判断 某 一 天 是 否 是 周末 


window.onload = initDate; 












































function initDate() { 
var now = new Date(); 


if (now.getDay() > 0 && now.getDay() < 6) { 
var dtString = "Sorry, it's a weekday."; 


else { 
var dtString = "Hooray, it's a weekend!"; 


document.getElementById("dtField").innerHTML = dtString; 
} 


> 判断 是 否 是 周末 








1. var now = new Date(); 

首先 将 变量 now 设置 为 当前 日 期 。 

2. if (now.getDay() > 0 8& now.getDay() < 6) { 

这 一 行 从 now 变量 中 提取 出 数字 式 的 周 中 的 日 期 , 检查 它 是 否 大 于 0( 记 住 星 期 日 是 0)。 接 下 来 ， 
使 用 8& 操 作 符 ( 这 是 逻辑 与 ， 表 示 两 部 分 必须 都 为 真 )， 然 后 检查 它 是 否 小 于 6 ( 星期 六 )。 

3.var dtString = "Sorry, it's a weekday."; 

如 果 表 达 式 的 结果 大 于 0 且 小 于 6， 那 么 它 一 定 在 1 到 5 之 间 ， 即 从 星期 一 到 星期 五 ， 所 以 脚本 
在 dtString 中 设置 对 应 的 字符 串 。 

4. else { 

var dtString = "Hooray, it's a weekend!"; 

如 果 步 又 2 中 的 测试 失败 了 ,那么 一 定 是 周末 ， 所 以 在 dtstring 中 设置 对 应 的 字符 串 。 

5. document.getElementById("dtField").innerHTML = dtString; 

最 后 ， 像 前 面 的 示例 中 一 样 ， 将 dtField 元 素 的 innerHTML 属性 设置 为 dtString 的 值 。 结 果 见 
图 11-2。 
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(8) Weekend Checker - Mozilla Firefox 





File Edit View History Bookmarks Tools Help 
Pc Ay (LI httpy/didropbo zy ~| [SB coogi P| Gr 
A; Most Visited , , Getting Started à Latest Headlines |_| White text 


[5] 


|. | Weekend Checker 


Hooray, it's a weekend! 

















Done 














11-2 ”消息 写 到 了 窗口 中 


11.3 ”根据 时 间 对 消息 进行 定制 

可 以 使 用 前 一 个 示例 中 的 技术 ， 根 据 时 间 对 消息 进行 定制 。 当 用 户 进入 站 点 时 ， 这 种 技术 常常 用 
来 提供 友好 的 问候 语 。 脚 本 11-3 演示 具体 做 法 ， 图 11-3 显示 的 是 在 一 般 人 已 经 人 睡 的 时 间 段 ， 页 面 
上 显示 的 消息 。 
脚本 11-3 ”这 个 脚本 用 来 检查 时 间 ， 并 且 作出 相应 的 反应 


window.onload = initDate; 



































function initDate() { 


var now = new Date(); 
document. getElementById("dtField").innerHTML = timeString(now.getHours()); 


function timeString(theHour) { 


if (theHour < 5) { 
return "What are you doing up so late?"; 


} 
if (theHour < 9) { 
return "Good Morning!"; 


} 
if (theHour < 17) { 
return "No surfing during working hours!"; 


return "Good Evening!"; 








tolloja 











© What time is it? JavaScript knows... - Windows Internet Explorer 
ipt 
QU - [e nt javase... v | 4 | x | [Gl Googie 


File Edit View Favorites Tools Help 





T 


ule Favorites sip | @ What time is it? JavaScri.. EmulatelE7 fj v «Page v 





What are you doing up so late? 





Done @ Internet | Protected Mode: On R100% ~ 


图 11-3 ”如 果 出 现 这 条 消息 ， 那 么 肯定 是 晚上 很 晚 的 时 候 了 


























QC) if (theHour < 5) { 
return "What are you doing up so late?"; 


这 个 脚本 中 的 新 代码 首先 进行 一 个 条 件 测试 。getHours() 方 法 从 now 变量 中 提取 出 小 时 ， 然 后 检 














查 这 个 数字 是 否 小 于 5( 对 应 于 凌晨 $ 点， 因为 JavaScript 中 的 小 时 是 从 午夜 0 点 开始 编号 的 )。 

如 果 当 前 时 间 在 凌晨 S 点 之 前 ， 脚 本 就 将 这 个 消息 写 到 文档 窗口 ， 如 图 12-3 所 示 。 

脚本 的 其 余部 分 进行 类 似 的 检查 ， 针 对 不 同 的 时 间 ， 写 出 不 同 的 消息 。 如 果 在 凌晨 5 点 和 上 午 9 
点 之 间 , 就 显示 Good Morning!; 在 上 午 9 点 和 下 午 5 点 之 间 , 就 显示 No surfing during working hours! ; 
在 下 午 5 点 之 后 ， 就 显示 Good Evening!。 


11.4 根据 时 区 显示 日 期 


在 默认 情况 下 ， 显 示 的 日 期 和 时 间 是 用 户 计算 机 上 的 日 期 和 时 间 (假设 它们 的 设置 是 正确 的 )。 
如 果 和 希望 显示 其 他 地 方 的 日 期 ， 就 需要 根据 协调 世界 时 间 (Coordinated Universal Time, UTC ) 计算 
它 。UTC 本 质 上 是 格林 尼 治 标准 时 间 (Greenwich Mean Time, GMT) 的 别名 ，UTC 也 称 为 “世界 时 
间 (Universal Time, UT)”. JAZ 11-4 是 这 个 页 面 的 HIML， 脚 本 11-5 中 的 JavaScript 演示 如 何 计算 
其 他 时 区 中 的 日 期 。 


脚本 11-4 ”时 区 脚本 的 HTML 使 用 类 来 标 出 不 同 办 公 室 的 时 区 


<!DOCTYPE html» 

<html> 

<head> 
<title>Time Zones</title> 
«script src="script04.js"></script> 

</head> 

<body> 
<h3>0ur office hours are 9:00 am to 5:00 pm, Monday through Friday,at each of our locations.It is now 
—></h3><ul> 
<li><span class="tz-8"> </span> in San Francisco«/li» 
<li><span class="tz-5"> </span> in New York«/li» 
<li><span class="tz-0"> </span> in London«/li» 
<li><span class="tz+7"> </span> in Hong Kong«/li»«/ul» 

</body> 

</html> 


脚本 11-5 可 以 调整 这 个 脚本 来 显示 任何 时 区 中 的 时 间 


window.onload = initDate; 


































































































function initDate() { 
var allTags = document.getElementsByTagName("*"); 


for (var i=0; i«allTags.length; i++) { 


if (allTags[i].className.indexOf("tz") == o) { 
showTheTime(allTags[i],allTags[i].className.substring(2)); 


) 


function showTheTime(currElem,tzOffset) ( 
var dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"); 


var thatTZ = new Date(); 


11.4 根据 时 区 显示 日 期 211 





var dateStr = thatTZ.toUTCString(); 


dateStr = dateStr.substr(0,dateStr.length - 3); 
thatTZ.setTime(Date.parse(dateStr)); 
thatTZ.setHours(thatTZ.getHours() + parseInt(tzOffset)); 


currElem.innerHTML = showTheHours(thatTZ.getHours()) + showZeroFilled(thatTZ.getMinutes()) + 
—showAmPm(thatTZ.getHours()) + dayName[thatTZ.getDay()]; 


function showTheHours(theHour) { 
if (theHour -- 
return 12; 


] 
if (theHour « 13) ( 
return theHour; 


return theHour-12; 


} 
function showZeroFilled(inValue) { 
if (inValue > 9) { 
return ":" + inValue; 
return ":0" + inValue; 
function showAmPm(thatTime) { 
if (thatTime < 12) { 
return " AM "; 
return " PM "; 


} 


p^ 根据 时 区 显示 日 期 








1. var allTags = document.getElementsByTagName("*") ; 

在 initDate() PAA Pel allTags 变量 。document .getElementsByTagName("*") 命 令 是 一 种 很 方便 
的 技巧 一 一 星 号 让 JavaScript 返回 一 个 包含 页 面 上 所 有 标签 的 数组 。 然 后 就 可 以 遍历 这 个 数组 ， 寻 找 
感 兴趣 的 标签 。 


2. for (var i-0; i<allTags.length;i++) ( 
if (allTags[i].className.indexOf("tz") == 0) ( 
showTheTime(allTags[i],allTags|i].className.substring(2)); 














开始 一 个 循环 ， 对 allTags 数组 包含 的 页 面 元 素 进 行 遍历 。allTags[i].className.indexOf ("tz")--0 
的 意思 是 ,“ 第 i 个 标签 是 否 具 有 以 “tz” 开 头 的 class 属性 ”一 一 如 果 是 这 样 ， 就 调用 showTheTime()。 

传递 给 showTheTime() 两 个 参数 : 第 一 个 是 第 i 个 标签 元 素 ， 第 二 个 是 class 属性 ( 见 脚 本 11-4 ) 
中 “tz” 后 面 的 部 分 ， 这 由 substring(2) 表 示 。 为 什么 不 在 showTheTime() 函 数 中 进行 这 个 计算 呢 ? 这 
会 使 showTheTime() 更 简单 ， 因 为 第 二 个 参数 明确 地 提供 时 区 偏 移 量 。 

3. function showTheTime(currElem, tzOffset) { 

这 个 函数 接受 前 一 步 中 传递 给 它 的 两 个 参数 。 在 这 个 函数 中 ， 这 两 个 参数 分 别称 为 currElem 和 
tz0ffset. 


4. var thatTZ = new Date(); 
var dateStr = thatTZ.toUTCString(); 
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创建 一 个 新 的 日 期 变量 thatTZ。 下 一 行将 日 期 和 时 间 (基于 UT 形式 ) 转换 为 字符 串 〈 见 本 章 末 
尾 的 表 11-1 )， 将 结果 存储 在 dateStr 中 。 
5. dateStr = dateStr.substr (0,dateStr.length - 3); 
在 本 节 中 , 我 们 希望 将 thatTz 重新 设置 为 基于 UT 而 不 是 本 地 时 间 , 然后 就 能 够 加 上 传递 进来 的 
有 移 量 以 获得 所 需 的 结果 。 但 是 ，JavaScript 不 允许 这 么 简单 地 处 理 。 我 们 现在 有 了 字符 串 格式 的 世 
界 时 间 ， 但 是 ， 如 果 根 据 它 重新 设置 时 间 ， 它 会 误解 我 们 的 意图 ， 认 为 我 们 真 地 需要 本 地 时 间 。 我 们 
需要 做 的 是 ， 获 得 日 期 和 时 间 的 字符 串 版 本 ， 并 且 去 掉 最 后 三 个 字符 〈 即 UTC )。 
6. thatTZ.setTime(Date.parse(dateStr)); 
去 掉 最 后 三 个 字符 之 后 ， 可 以 使 用 parse 方法 将 日 期 转换 为 毫秒 ， 然 后 用 setTime 方法 将 thatTZ 
设置 为 我 们 需要 的 时 间 。 
7. thatTZ.setHours(thatTZ.getHours() + parseInt(tzOffset)); 
既然 已 经 存储 了 UT 日 期 ， 就 需要 加 上 传递 进来 的 小 时 数 ， 也 就 是 我 们 需要 的 时 间 与 UT 的 偏 移 
量 。 因 为 时 区 可 以 从 +12 到 -12， 所 以 传递 进来 的 时 区 可 以 是 "-12" 到 "+12" 之 间 的 某 个 数 。 我 们 使 用 
parseInt() 将 这 个 字符 串 转换 为 -12 ~ 12 的 一 个 数字 ， 然 后 将 它 与 当前 UT 时 间 相 加 。 结 果 就 是 我 们 
需要 的 值 : 这 个 时 区 中 的 正确 日 期 和 时 间 。 
8. currElem.innerHTML = showTheHours(thatTZ.getHours()) + showZeroFilled(thatTZ.getMinutes()) 
—+ showAmPm(thatTZ.getHours()) + dayName[thatTZ.getDay()]; 
这 一 行 看 起 来 让 人 糊涂 , 其 实 它 仅仅 是 将 其 他 函数 的 结果 拼接 起 来 , 构造 出 要 放 进 文档 的 时 间 值 ， 
然后 设置 currElem 的 innerHTML 属性 ， 从 而 将 计算 的 结果 放 进 文档 中 。 最 终 的 结果 见 图 11-4。 
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Our office hours are 9:00 am to 5:00 pm, Monday through 
Friday, at each of our locations. It is now 


* 6:15 PM Sunday in San Francisco 
® 9:15 PM Sunday in New York 

* 2:15 AM Monday in London 

* 9:15 AM Monday in Hong Kong 











图 11-4 这 个 脚本 根据 时 区 计算 出 每 个 办 公 室 的 时 间 


下 面 三 个 函数 showTheHours() 、showZeroFilled() 和 showAmpm() 都 在 showTheTime() 函数 内 部 ， 所 
以 它们 可 以 共享 变量 。 可 以 看 到 ， 这 里 并 没有 这 样 做 ， 但 下 一 节 就 会 用 到 。 
9. function showTheHours(theHour) { 


if (theHour == 0) { 
return (12); 


















































首先 ， 建立 showTheHours() PIAL, EAB theHour。 如 果 theHour EF, 那么 返回 12 ( 表示 中 
^F. 12 点 ); 否则 继续 执行 后 面 的 代码 。 
10. if (theHour < 13) { 
return theHour; 

















return theHour-12; 
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如 果 时 间 的 小 时 部 分 小 于 13， 那 么 只 需 直 接 返 回 变 量 theHour, All, WIE] theHour yk 12 这 会 
将 中 午 以 后 的 小 时 数 转 换 为 12 小 时 制 )。 





11. function showZeroFilled(inValue) { 
if (inValue > 9) { 


return ":" + inValue; 


return ":0" + inValue; 





文 个 函数 用 来 使 输出 更 整齐 。 当 分 钟 数 或 秒 数 小 于 等 于 9 时 ， 它 在 数字 前 面 加 上 一 个 零 。 
12. function showAmPm(thatTime) { 
if (thatTime < 12) { 
return " AM "; 











return " PM " 




















} 
这 个 函数 在 时 间 后 面 添加 AM 或 PM。 如 果 传 递 的 变量 thatTime 小 于 12， 那 么 函数 的 返回 值 是 
AM; 否则 ,返回 PM。 注意 ,在 AM 和 PM 文本 字符 串 前 面 加 上 空格 ， 这 是 为 了 让 效果 更 好 看 。 
V 提示 
口 


7S ab 


没有 处 理 夏 令 时 (Daylight Saving Time ) 的 简便 方法 ,一些 浏 览 器 会 错误 地 处 理 夏 令 时 。 而 且 ， 
是 否 能 够 处 理 夏 令 时 还 依赖 于 计算 机 用 户 是 否 知道 如 何 设置 他 们 的 计算 机 。 好 在 Windows 和 
Mac OS X 能 够 根据 因特网 时 间 服 务 器 自动 地 设置 时 间 ， 这 会 将 夏令 时 考虑 进去 ， 所 以 可 以 组 
解 这 个 问题 。 糟 糕 的 是 ，JavaScript 无 法 从 操作 系统 获得 关于 夏令 时 的 信息 , 所 以 它 无 法 判断 出 
你 所 处 的 时 间 和 





























I 地 点 是 否 应 用 夏令 时 。 
很 容易 在 HTML 中 添加 为 一 个 城市 ， 而 ] 





口 








昌 不 需要 修改 JavaScript， 脚 本 仍然 可 以 正常 工作 。 


11.5 把 24 小 时 制 转换 为 12 小 时 制 

















JavaScript 以 24 小 时 制 提供 时 间 。 许多 人 不 熟悉 或 不 喜欢 这 种 格式 , 所 以 可 能 希望 将 它 转换 为 12 
小 时 制 。 在 下 面 的 两 个 脚本 中 , 你 将 看 到 完成 此 任务 的 一 种 方法 。 这 个 页 1 























Hl (HTML 见 脚本 11-6, CSS 
见 脚本 11-7 ) 有 两 个 重要 的 元 素 : hz 标签 和 两 个 单 选 按钮 。 脚 本 将 时 间 写 和 前者， 而 使 用 两 个 单 选 按 
钮 ， 用 户 可 以 在 24 小 时 制 和 12 小 时 制 之 间 进 行 切 换 〈 见 图 11-5 )。JavaScript 见 脚本 11-8。 


{Æ JavaScript Clock - Internet Explorer provided by Dell 
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Display 24-hour Clock? © Yes @No 
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图 11-5 ”上 脚本 运行 的 效果 


AN 
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脚本 11-6 这 个 HTML 使 用 id 标识 每 个 单 选 按钮 


<!DOCTYPE html» 
<html> 
<head> 
<title>JavaScript Clock</title> 
<link href="script05.css" rel-"stylesheet"» 
«script src="script05.js"></script> 
</head> 
<body> 
<div class="centered"> 
«h2 id-"showTime"» </h2> 
Display 24-hour Clock? 
«input type-"radio" name-"timeClock" id-"show24" checked»«label for- "show24"»Yes«/label» 
<input type="radio" name-"timeClock" id-"show12"»«label for-"show12"»No«/ 
label» 
</div> 
</body> 
</html> 


脚本 11-7 下 面 的 样式 使 页 


body { 
background-color: #FFF; 
} 





I 











更 好 看 


.centered { 
text-align: center; 
} 


label { 
padding-right: 10px; 


脚本 11-8 ”这 个 脚本 在 24 小 时 制 和 12 小 时 制 之 间 进行 转换 
window.onload = showTheTime; 


function showTheTime() { 
var now = new Date(); 


document.getElementById("showTime").innerHTML = showTheHours(now.getHours()) + 
—showZeroFilled(now.getMinutes()) + showZeroFilled(now.getSeconds()) + showAmPm(); 
setTimeout (showTheTime, 1000) ; 


function showTheHours(theHour) { 
if (show24Hour() || (theHour > 0 && theHour < 13)) { 
return theHour; 


} 
if (theHour == 0) { 
return 12; 


return theHour-12; 
function showZeroFilled(inValue) { 
if (inValue > 9) { 


return ":" + inValue; 


return ":0" + inValue; 


} 
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function show24Hour() { 
return document.getElementById ("show24").checked; 
} 


function showAmpm() { 
if (show24Hour()) { 
return ""; 


P ((now. eee < 12)) { 
return " AM' 


return " PM"; 
} 
} 


> 把 24 小 时 制 转换 为 12 小 时 制 


1. document.getElementById ("showTime").innerHTML = showTheHours(now.getHours()) + 
—showZeroFilled(now.getMinutes()) + showZeroFilled(now. getSeconds()) + showAmPm(); 


与 前 一 个 示例 中 一 样 ， 这 一 行 看 起 来 让 人 糊涂 ， 其 实 它 仅 仅 是 将 其 他 函数 的 结果 连接 起 来 ， 构 造 
出 要 在 页 面 上 显示 的 时 间 值 。 然 后 将 结果 放 进 showTime 的 innerHTML 属性 。 

2. setTimeout (showTheTime , 1000); 

DEAT TS EDU Và ik RERP E Br M UC o 

3. function showTheHours(theHour) { 

接 下 来 ， 建 立 showTheHours 函数 ， 它 包含 参数 theHour。 


4.if (show24Hour() || (theHour > 0 && theHour < 13)) { 
return theHour; 









































} 
if (theHour == 0) { 
return 12; 


return theHour-12; 


这 些 条 件 语句 的 意思 是 : 如 果 用 户 希 望 显 示 24 小 时 制 , 或 者 时 间 的 小 时 部 分 大 于 零 旦 小 于 13( 记 
住 ，|| 操 作 符 表示 逻辑 或 ， 你 在 第 1 章 已 经 看 到 过 它 了 )， 那 么 直接 返回 变量 theHour。 如 果 theHour 
EF, WOE] I2 (表示 中 午 12 点 ); 和 否则， 返回 theHour wk 12 (这 会 将 中 午 以 后 的 小 时 数 转换 为 用 
12 小 时 制 表 示 )。 


5. function show24Hour() { 
return document.getElementById ("show24").checked; 


这 个 函数 根据 用 户 在 页 面 上 选中 的 单 选 按钮 ,返回 一 个 值 。 如 果 选 中 了 show 24， 就 返回 true fH , 
否则 返回 false。 


6. if (show24Hour()) { 
return ""; 






























































if ((now.getHours() < 12)) { 
return " AM"; 


return " PM"; 


这 个 函数 在 12 小 时 时 间 后 面 加 上 AM 或 PM。 如 果 函 数 show24Hour 返回 true， 它 就 不 返回 任何 内 
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容 ， 而 进入 下 一 个 函数 。 在 函数 showMilitaryTime 返回 false 的 情况 下 ， 如 果 now 变量 的 小 时 部 分 小 于 
12， 那 么 这 个 函数 返回 AM, FURE PM, FE, Æ AM 和 PM 前 面 加 一 个 空格 以 使 输出 更 美观 。 


11.6 ”创建 倒数 计数 器 


有 了 时候， 可 能 希望 在 页 面 上 建立 一 个 倒数 计数 器 ， 告 诉 用 户 离 未 来 的 某 个 事件 还 有 多 少 天 或 多 少 
小 时 。 脚 本 11-9 (HTML ) 和 脚本 11-10 (JavaScript) 提醒 本 书 的 另 一 位 作者 : 快 到 我 的 生日 和 圣诞 
节 了 ， 该 为 我 准备 礼物 了 。 其 效果 见 图 11-6。 





























ane Dynamic Countdown 
4)» | [D http://dl.dropbox.com/u/21; v CS Google QR) 
Dori says: 


It's only 98 days until my birthday and 238 days until Christmas, so you'd better 
start shopping now! 


And it's only 5 days until our anniversary... 














图 11-6 ”这 个 页 面 用 于 提醒 另 一 位 作者 
脚本 11-9 ”倒数 计数 器 脚本 的 HTML 


<!DOCTYPE html» 
<html> 
<head> 
<title>Dynamic Countdown</title> 
«script src="script06.js"></script> 
</head> 
<body> 
<p>Dori says:</p> 
<p>It's only «span class-"daysTill" id="bday"> </span> days until my birthday and «span class-"daysTill" 
—id-"xmas"» </span> days until Christmas, so you'd better start shopping now!«/p» 
«p»And it's only «span class-"daysTill" id-"anniv"» «/span» days until our anniversary...«/p» 
«/body» 
«/html» 


脚本 11-10 ”这 个 脚本 实现 倒数 计数 咒 ， 它 计算 Tom 还 有 多 少 天 不 在 家 


window.onload = showDays; 














function showDays() { 
var allTags = document.getElementsByTagName("*") ; 


for (var i=0;i<allTags.length; i++) { 
if (allTags[i].className.indexOf("daysTill") > -1) { 
allTags[i].innerHTML = showTheDaysTill(allTags[i].id); 


) 


function showTheDaysTill(thisDate) { 
var theDays; 


switch(thisDate) ( 
case "anniv": 
theDays - daysTill(5,6); 
break; 
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case "bday": 
theDays = daysTill(8,7); 
break; 

case "xmas": 
theDays = daysTill(12,25); 
break; 

default: 


return theDays + ; 


function daysTill(mm,dd) ( 
var now - new Date(); 
var inDate - new Date(now.getFullYear(),mm-1,dd); 


if (inDate.getTime() « now.getTime()) ( 
inDate.setYear(now.getFullYear()41); 


return (Math.ceil(dayToDays(inDate) - dayToDays(now))); 


function dayToDays(inTime) ( 
return (inTime.getTime() / (1000 * 60 * 60 * 24)); 


} 

> 创建 倒数 计数 器 

1. var allTags = document.getElementsByTagName("*"); 
创建 一 个 新 数组 allTags ， 并 用 页 面 上 的 所 有 标签 填充 它 。 
2. for (var i-0;i«allTags.length; i++) { 


if (allTags[i].className.indexOf("daysTill") > -1) { 
allTags[i].innerHTML = show TheDaysTill(allTags[i].id); 


























这 个 循环 遍历 allTags 数组 ， 检 查 在 页 面 上 任何 标签 的 class 属性 中 是 否 能 够 找到 字符 串 daysTill, 
请 记 住 , 一 个 标签 可 以 有 多 个 class 属性 ( 即 class="firstClass daysTill somethingElse fourthThing" ). 
如 果 找 到 了 daysTill, 就 调用 showTheDaysTill1() 函 数 , 并 且 传递 给 它 一 个 参数 : 这 个 标签 的 id( 这 
个 id 表示 要 在 这 个 页 面 中 显示 哪个 日 期 )。 这 个 函数 返回 一 个 值 ， 然 后 将 这 个 值 放 进 innerHTML。 


3. switch(thisDate) { 

case "anniv": 
theDays - daysTill(5,6); 
break; 

case "bday": 
theDays - daysTill(8,7); 
break; 

case "xmas": 
theDays - daysTill(12,25); 
break; 

default: 


如 果 你 不 记得 switch/case 多 级 条 件 结构 了 ,那么 可 以 回顾 第 2 章 中 的 讨论 。 在 这 里 ， 我 们 使 用 
thisDate 的 值 针对 3 个 case 语句 进行 测试 。 对 于 anniv 分 支 , 将 theDays 设置 为 5 月 6 日 (5、6 是 数 
字 表 示 ， 很 像 现实 中 日 期 的 写法 ) 对 于 bday， 将 它 设置 为 8 月 7 日 ; 对 于 xmas，theDays 设置 为 12 
月 25 日 。 
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"on, 
3 


4. return theDays + 

showTheDays () 函数 最 后 返回 日 的 编号 和 一 个 空格 。 加 空格 是 为 了 解决 TE 中 的 一 个 问题 : 它 会 消 
除 HTML 中 的 空格 。 如 果 脚 本 不 在 未 尾 返回 空格 ， 数 字 就 会 与 单词 days 靠 在 一 起 。 如 果 把 单词 days 
放 在 这 个 函数 中 ， 束 不 需要 在 后 面 加 空格 了 。 


5. function daysTill(mm,dd) { 
var now = new Date(); 
var inDate = new Date (nowgetFullYear(),mm-1,dd); 


这 一 步 建 立 daysTil1() 函 数 ， 这 个 函数 接受 来 自 步 又 3 中 的 case 语句 的 日 期 。 然 后 ， 创 建 变量 
now 和 inDate。 后 一 个 变量 设置 为 当前 年 份 以 及 传递 进来 的 月 份 (要 减 1 才能 获得 正确 的 结果 ， 见 后 
面 的 补充 内 容 “ 时 间 处 理 的 其 他 怪异 之 处 ”) 和 日 编号 。 


6. if (inDate.getTime() < now.getTime()) { 
inDate. setYear (now.getFullYear()+1); 



















































































然后 ， 将 这 个 日 期 与 今天 进行 比较 。 如 果 今 年 的 这 个 日 期 已 经 过 了 ， 就 将 年 份 递增 ， 从 而 以 下 一 
年 的 日 期 作为 对 比 的 目标 。 

7. return (Math.ceil(dayToDays(inDate) - dayToDays(now))); 

在 这 里 ， 我 们 计算 inDate 和 当前 日 期 之 间 的 天 数 。Math.ceil() 方 法 确保 结果 是 一 个 整数 。 


8. function dayToDays(inTime) { 
return (inTime.getTime() / (1000 * 60 * 60 * 24)); 


JavaScript 将 日 期 存储 为 自 1970 年 1 月 1 日 以 来 的 毫秒 数 。 为 了 比较 两 个 日 期 ,需要 把 它 改 为 
H 1970 年 1 月 1 日 以 来 的 天 数 。 首 先 , 计算 一 天 的 毫秒 数 ，1000 C1 秒 内 的 毫秒 数 ) 乘 以 60 (1 分 
钟 内 的 秒 数 )， 再 乘 以 60 C1 小 时 内 的 分 钟 数 )， 然 后 乘 以 24 (1 天 内 的 小 时 数 )。 将 getTime() 返 回 的 
毫秒 数 除 以 这 个 数字 ， 就 会 得 到 自 1970 年 1 月 1 日 以 来 的 天 数 。 












































时 间 处 理 的 其 他 怪异 之 处 

在 JavaScript 中 ， 月 份 从 0 开始 编号 ， 而 日 从 1 开始 编号 ， 而 且 根 据 浏览 器 使 用 的 JavaScript 
MA, JavaScript 处 理 1970 年 之 前 的 年 份 的 方法 也 不 一 致 。 

Navigator 2 ( 使 用 JavaScript 1.0 ) 根本 不 能 处 理 1970 年 之 前 的 年 份 , 而且 有 2000 年 问题 ( Year 
2000 Problem ), 因此 对 于 2000 年 或 之 后 的 日 期 , 会 返回 错误 的 结果 ,在 Navigator 3( 使 用 JavaScript 
11) 中 ， 如 果 年 份 在 20 世纪 ，getYear() 方 法 返回 的 值 是 两 位 的 ; 如 果 年 份 在 1900 年 之 前 或 2000 
年 之 后 ， 就 返回 四 位 数字 。 但 是 ， 并 非 所 有 Netscape 版 本 都 是 这 种 情况 , 例如 Mac 的 Netscape 
Navigator 4 对 于 2000 年 返回 100。 更 糟糕 的 是 ， 在 Firefox 中 仍然 有 这 种 情况 一 一 在 当前 版 本 (4) 
中 ，getYear() 仍 然 返 回 两 位 数字 ( 对 于 21 世纪 的 年 份 就 会 出 现 错误 )。 

JavaScript 1.2 ( Æ Navigator 4 以 及 兼容 ECMAScript 的 浏览 器 中 使 用 ， 比 如 JIE 4 和 更 高 版 本 ) 
引入 了 一 个 新 方法 getFullYear(), ， 这 个 方法 总 是 返回 四 位 的 年 份 。 如 果 你 为 版 本 4 和 更 高 版 本 的 
浏览 器 设计 页 面 ， 那 么 建议 使 用 getFullYear() ， 我 们 在 本 书 中 就 是 这 么 做 的 。 

由 于 某 些 原因 ，JavaScript 中 的 getTime() 方 法 返回 自 1970 年 1 月 1 日 以 来 的 毫秒 数 。 好 在 我 
们 几乎 用 不 着 查看 这 个 数字 ， 因 为 过 去 40 年 的 毫秒 数 是 一 个 非常 大 的 数字 。 








11.7 


隐藏 和 显示 层 

















尽管 HTML, CSS 和 JavaScript 组 合 可 以 形成 一 个 文档 ,但 是 有 时 候 让 效果 看 起 来 像 是 有 多 个 
文档 更 有 用 。 例如， 通过 CSS 和 JavaScript 的 组 合 ， 在 当前 HTML 页 面 内 部 (或 上 面 ) 显示 弹出 窗 











关心 效果 





























口 之 类 的 东西 。 不 ， 这 不 使 用 废弃 的 Netscape layer 标签 ， 它 只 是 看 起 来 像 是 单独 的 一 层 ， 用 户 只 


o 





这 需要 3 个 文档 : HTML 文档 ( 见 脚本 11-11) , CSS 样式 表 ( 见 脚本 11-12 ) 和 JavaScript 文件 
( 见 脚本 11-13) 。 我 们 通过 JavaScript 使 用 HTML 中 分 配 的 id 来 操作 图 像 ， 使 用 CSS 设置 广告 在 页 
面 上 的 位 置 , 尤其 是 它 的 z-index， 这 个 数字 决定 哪个 对 象 显示 在 其 他 对 象 上 面 。 当 两 个 对 象 占据 同一 
空间 时 ， 会 显示 z-index 值 大 的 对 象 。 
脚本 11-11. 这 个 广告 示例 的 HTML 使 用 id 标 出 要 操作 的 元 素 

«IDOCTYPE html» 


«html» 
«head» 




















«title»Layered Divs«/title» 
«link href-"scriptO7.css" rel-"stylesheet"» 
«script src-"script07.js"»«/script» 


«/head» 
«body» 


«div id-"annoyingAdvert"» 

This is an incredibly annoying ad of the type you might find on some web sites. 

«div id-"closeBox"»8otimes;«/div» 
«/div» 
«p»Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean lacus elit, volutpat vitae, egestas 
—in, tristique ut, nibh. Donec congue lacinia magna. Duis tortor justo, dapibus vel, vulputate sed, mattis 
—sit amet, leo. Cras purus quam, semper quis, dignissim id, hendrerit eget, ante. Nulla id lacus eget 
nulla bibendum venenatis. Duis faucibus adipiscing mauris. Integer augue. In vulputate purus eget enim. 
—Nam odio eros, porta vitae, bibendum sit amet, iaculis nec, elit. Cras egestas scelerisque pede. Donec 
—a tellus. Nullam consectetuer fringilla nunc.</p> 


«p»Nam varius metus congue ligula. In hac habitasse platea dictumst. In ut ipsum a pede rhoncus convallis. 
—Sed at enim. Integer sed metus quis est egestas vestibulum. Quisque mattis tortor a lorem. Nam diam. 
— Integer consequat lectus. Donec molestie elementum nisl. Donec ligula sapien, volutpat eget, dictum 
—quis, mollis a, odio. Aliquam augue enim, gravida nec, tempor ac, interdum in, urna. Aliquam mauris. 
Duis massa urna, ultricies id, condimentum ac, gravida nec, dolor. Morbi et est quis enim gravida nonummy. 
一 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nisl quam, 
tincidunt ultrices, malesuada eget, posuere eu, lectus. Nulla a arcu. Sed consectetuer arcu et velit. 
—Quisque dignissim risus vel elit.«/p» 


«p»Nunc massa mauris, dictum id, suscipit non, accumsan et, lorem. Suspendisse non lorem quis dui rutrum 
vestibulum. Quisque mauris. Curabitur auctor nibh non enim. Praesent tempor aliquam ligula. Fusce eu 
—purus. Vivamus ac enim eget urna pulvinar bibendum. Integer porttitor, augue et auctor volutpat, lectus 
—dolor sagittis ipsum, sed posuere lacus pede eget wisi. Proin vel arcu ac velit porttitor pellentesque. 
Maecenas mattis velit scelerisque tellus. Cras eu tellus quis sapien malesuada porta. Nunc nulla. Nullam 
— dapibus malesuada lorem. Duis eleifend rutrum tellus. In tempor tristique neque. Mauris rhoncus. Aliquam 
—purus.«/p» 


«p»Morbi felis quam, placerat sed, gravida a, bibendum a, mauris. Aliquam porta diam. Nam consequat feugiat 
—4diam. Fusce luctus, felis ut gravida mattis, ante mi viverra sapien, a vestibulum tellus lectus ut massa. 
—Duis placerat. Aliquam molestie tellus. Suspendisse potenti. Fusce aliquet tellus a lectus. Proin augue 
—diam, sollicitudin eget, hendrerit non, semper at, arcu. Sed suscipit tincidunt nibh. Donec ullamcorper. 
—Nullam faucibus euismod augue. Cras lacinia. Aenean scelerisque, lorem sed gravida varius, nunc tortor 
—gravida odio, sed sollicitudin pede augue ut metus. Maecenas condimentum ipsum et enim. Sed nulla. Ut 
—neque elit, varius a, blandit quis, facilisis sed, velit. Suspendisse aliquam odio sed nibh.«/p» 


«/body» 
«/html» 
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body { 





脚本 11-12 CSS 对 这 个 层 应 用 样式 ， 让 它 看 起 来 与 文档 的 其 余部 分 不 一 样 


background-color: #FFF; 


} 


#annoyingAdvert { 


position: absolute; 


z-index: 2; 


display: none; 


width: 100px; 


background-color: #FFC; 
padding: 10px; 


margin: 10px; 


border: 5px solid yellow; 


} 


#closeBox { 


position: absolute; 


color: red; 


font-size: 1. 


top: 0; 
right: 0; 
} 


5em; 


脚本 11-13 JavaScript 显示 这 个 层 并 允许 用 户 隐藏 它 〈 谢 天 谢 地 ) 


window.onload = initAdvert; 


function initAdvert() { 


var adBox = 


"annoyingAdvert" ; 


document. getElementById(adBox).style.display = "block"; 
document. getElementById("closeBox").onclick = function() { 
document .getElementById(adBox).style.display = "none"; 


} 
} 


> 隐藏 和 显示 对 象 








1. var adBox = " 


annoyingAdvert" ; 


document .getElementById(adBox).style.display = "block"; 
， 就 会 知道 要 显示 的 层 的 id 是 annoyingAdvert, BALA 11-11 告诉 这 个 层 它 最 
初 应 该 是 隐藏 的 ,所 以 看 不 到 它 。 但 是 ,在 加 载 页 面 之 后 ,脚本 通过 把 display 属性 设置 为 block 


看 了 脚本 11-11 


来 显示 它 。 




















2. document.getElementById ("closeBox").onclick = function() { 
document.getElementById(adBox).style.display = "none"; 


) 




















为 什么 这 个 元 素 名 为 annoyingAdvert? 因为 无 法 阅读 它 背 后 的 内 容 ( 见 图 11-7) 。 但 是 ， 我 们 不 


E 


想 讨 人 厌 , 所 以 让 用 
就 会 关闭 这 个 层 。 








户 能 够 通过 单 击 关 闭 控 件 关闭 这 个 层 C 即 隐藏 它 ) 。 把 display 








B 


及 性 设置 为 none, 
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11.8 移动 文档 中 的 对 象 
可 以 使 用 JavaScript 让 对 象 ( 图像 、 文 本 等 ) 在 屏幕 上 到 处 移动 。 实 际 上 ， 甚 至 可 以 让 对 象 看 起 





来 像 是 在 做 三 维 移动 ， 让 对 象 在 文档 中 的 其 他 对 象 背 后 移动 。 在 这 








广告 图 像 是 如 何 更 令 人 讨厌 的 。 


这 个 示例 需要 3 个 文档 ， 其 中 HTML 文档 和 CSS 样式 表 与 前 
文件 ( 见 脚本 11-14 )。 现 在 ， 它 会 





会 停 下 来 ( 见 图 11-8 )， 最 终 


图 11-7 广告 出 现在 左边 ， 用 户 可 以 关闭 它 


版 本 一 样 





能 够 关闭 它 


脚本 11-14 移动 广告 的 JavaScript 


window.onload = initAdvert; 


function initAdvert() { 


var adBox = "annoyingAdvert"; 


document.getElementById(adBox).style.display = "block"; 

document.getElementById(adBox).onmouseover - slide; 

document.getElementById("closeBox").onclick = function() ( 
document.getElementById(adBox).style.display - "none"; 


} 
} 


function slide() { 


var adBox = "annoyingAdvert"; 


if (nextPos(adBox) <= (document.body.clientWidth-150)) { 


document .getElementById(adBox).style.left = 


setTimeout (slide, 100); 


} 


function nextPos(elem) { 
return document. getElementById(elem) .offsetLeft+1; 





nextPos(adBox) + "px"; 








个 示例 中 ， 你 将 看 到 前 个 任务 中 的 


， 这 里 仅 给 出 JavaScript 





“ 跑 开 ”。 谢 天 谢 地 ， 在 跑 出 屏幕 之 前 它 
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11-8. 在 这 个 版 本 中 , 广告 会 移动 右边 ， 可 以 在 这 里 最 终 关 闭 它 


=> 移动 对 象 








1. document.getElementById(adBox).onmouseover = slide; 


为 了 开始 移动 ， 在 广告 上 添加 一 个 onmouseover 事件 处 理 程序 ， 让 它 触 发 slide() RŽ 

2. if (nextPos(adBox) <= (document.body.clientWidth-150)) { 

在 移动 广告 层 之 前 ， 需 要 检查 它 的 位 置 是 否 处 于 限制 范围 内 一 一 实现 的 方法 是 获取 它 的 当前 位 置 
(使 用 nextPos() 函 数 ) 并 与 文档 窗口 的 宽度 作 比 较 。 如 果 当 前 位 置 小 于 窗口 宽度 ( 减 去 150 像素 是 为 
了 把 层 本 身 的 宽度 考虑 进去 )， 那 么 就 希望 继续 移动 。 

3. document.getElementById(adBox).style.left = nextPos(adBox) + "px"; 


WAS vac em te oh A, 我 们 必须 修改 它 的 style.left 属性 。 在 这 里 ,获取 对 
象 的 下 一 个 位 置 ， 最 后 添加 px， 这 样 就 形成 了 style.left 属性 所 需 的 格式 。 只 需 修改 style.left 属 
性 ， 对 象 就 会 移动 到 新 的 位 置 。 

4. setTimeout (slide, 100) ; 

这 里 ， 通 过 调用 setTimeout(), 每 100 毫秒 (0.1 b) 重复 调用 slide()， 从 而 让 JavaScript — Ei 
移动 。 

5. function nextPos(elem) { 

前 面 有 两 个 地 方 用 到 了 元 素 的 当前 位 置 ， 这 里 的 函数 用 来 获得 当前 位 置 。 这 个 函数 需要 的 参数 只 
是 元 素 的 id。 

6. return document.getElementById (elem). oe 

得 到 了 对 象 的 id， 就 可 以 找到 这 个 对 象 。 然 后 ， 只 需 获 取 对 象 的 offsetLeft 属性 ， 这 是 对 象 的 

边 位置 。offsetLeft 属性 包含 一 个 数字 值 ， 所 以 可 以 按 原样 返回 它 。 
Vv 提示 
O 你 可 能 会 奇怪 : 既然 offsetLeft 是 数字 ， 为 什么 不 直接 设置 它 ， 而 要 修改 style.left 属 
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必须 这 么 做 ， 因 为 offsetLeft 是 只 读 的 ， 也 就 是 说 ， 可 以 读 它 的 值 ， 但 是 不 能 修改 它 。 没 有 
任何 跨 浏览 器 的 可 写 的 数字 型 定位 元 素 。 
11.9 “日 期 方法 


因为 常常 需要 处 理 日 期 ， 所 以 这 里 用 一 个 表格 列 出 Date 对 象 的 所 有 方法 。 在 表 11-1 中 ，UTC 是 
Coordinated Universal Time 的 缩写 , 它 在 1986 年 取代 格林 尼 治 时 间 , 成 为 时 间 的 世界 标准 。 包 含 UTC 
的 方法 只 能 在 JavaScript 1.2 或 更 高 版 本 中 使 用 。 


表 11-1 日 期 方法 



















































































5 ”法 te xh 返 回 值 JavaScript 版 本 
getDate() 月 中 的 日 期 1~31 1.0 
getUTCDate() 1.2 
getday() 周 中 的 日 期 (整数 值 ) 0~6 1.0 
getUTCDay() 1:2 
getFullYear() 完整 的 四 位 年 份 1900+ 1.2 
getUTCFullYear() 
getHours() 日 中 的 时 期 (整数 值 ) 0~23 1.0 
getUTCHours () 1.2 
getMilliseconds() 自 上 一 秒 以 来 的 毫秒 数 0~999 1.2 
getUTCMilliseconds() 
getMinutes() 自 上 一 小 时 以 来 的 分 钟 数 0~59 1.0 
getUTCMinutes() 1.2 
getMonth() 年 中 的 月 份 0~11 1.0 
getUTCMonth() 1.2 
getSeconds() 自 上 一 分 钟 以 来 的 秒 数 0~59 1.0 
getUTCSeconds() 1.2 
getTime() 自 1970 年 1 月 1 日 午夜 以 来 的 毫 1.0 

秒 数 
getTimezoneOffset() 本 地 时 间 和 GMT 之 间 相 差 的 分 0~1439 1.0 
getYear() 日 期 的 年 份 部 分 对 于 1900-1999 年 的 年 1.0 








份 , 是 0-99; 对 于 以 后 的 
年 份 ， 是 四 位 数字 





















































parse() 给 出 一 个 日 期 /时 间 字 符 串 ， 返 回 自 1.0 
1970 年 1 月 1 日 午夜 以 来 的 毫秒 数 

setDate() 给 出 1~31 之 间 的 数字 ， 设 置 天 以 毫秒 数 表 示 的 日 期 ( 从 1.0 

setUTCDate() JavaScript 1.2 开始 ) 1.2 

setFullYear() 给 出 四 位 的 年 份 ， 设 置 年 份 以 毫秒 数 表示 的 日 期 1.2 














setUTCFullYear() 
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5 X 描 R 返 E fü JavaScript 版 本 
setHours() 给 出 0-23 之 间 的 数字 ， 设 置 小 时 站 毫秒 数 表 示 的 日 期 (从 1.0 
setUTCHours () JavaScript 1.2 开始 ) 12 
setMilliseconds() 给 出 0-999 之 间 的 数字 ， 设 置 毫秒 六 毫秒 数 表 示 的 日 期 1.0 
setUTCMilliseconds() 
setMinutes() 给 出 0~59 之 间 的 数字 ,设置 分 钟 义 毫秒 数 表示 的 日 期 (从 1.0 
setUTCMinutes() JavaScript 1.2 开始 ) 12 
setMonth() 给 出 0-11 之 间 的 数字 ， 设 置 月 份 义 毫秒 数 表示 的 日 期 (从 1.0 
setUTCMoth() JavaScript 1.2 开始 ) 12 
setSeconds() 给 出 0-59 之 间 的 数字 ， 设 置 秒 以 毫秒 数 表示 的 日 期 (从 1.0 
setUTCSeconds() JavaScript 1.2 开始 ) 12 
setTime() 给 出 自 1970 年 1 月 1 日 午夜 以 来 以 毫秒 数 表示 的 日 期 1.0 
的 毫秒 数 ， 设 置 日 期 
setYear() 给 出 两 位 或 四 位 数字 值 , 设 置 年 份 以 毫秒 数 表示 的 日 期 (从 1.0 
JavaScript 1.2 开始 ) 
toGMTString() 字符 串 格 式 的 GMT 日 期 和 时 间 day dd mm yyyy hh:mm:ss 1.0 
toUTCString() GMT 1.2 
toLocaleString() 字符 串 格 式 的 本 地 日 期 和 时 间 根据 操作 系统 、 地 区 和 浏览 1.0 
器 的 不 同 ， 返 回 值 有 所 不 同 
toString() 字符 串 格式 的 本 地 日 期 和 时 间 根据 操作 系统 和 浏览 器 的 1.0 
不 同 ， 返 回 值 有 所 不 同 
UTC() 给 出 年 月、 日 (以 及 可 选 的 小 时 、 以 毫秒 数 表示 的 日 期 1.0 
分 钟 、 秒 和 毫秒 ) 格式 的 日 期 , 3E Ie 
E 1970 年 1 月 1 日 以 来 的 毫秒 数 
valueOf() 自 1970 年 1 月 1 日 午夜 以 来 的 毫 以 毫秒 数 表示 的 日 期 1.2 


秒 数 


JavaScript 应 用 示例 











本 书 前 面 的 各 章 中 , 你 学 习 了 如 何 使 用 许多 JavaScript 技术 实现 特定 的 任务 。 在 你 建立 的 许 
Esant, 常常 只 需要 使 用 一 种 技术 ， 而 且 能 够 使 用 本 书 中 的 脚本 来 完成 任务 〈 党 常 只 需 
要 做 少量 修改 )。 
但 是 ， 有 时 候 需 要 使 用 多 种 技术 才能 完成 任务 ， 这 就 是 本 章 涉及 的 主题 。 本 章 中 的 任务 需要 结合 
使 用 各 种 技术 ， 而 且 这 些 任务 在 你 自己 的 Web 站 点 上 往往 很 常见 。 
在 本 章 中 ， 你 将 学 习 如 何 用 大 纲 式 可 折 县 菜单 和 下 拉 菜 单 改进 站 点 的 用 户 界面 ， 创 建 幻 灯 片 ， 用 
JavaScript 处 理 文本 ,让 JavaScript 以 容易 理解 的 图 形 化 方式 显示 数据 ， 以 及 在 脚本 的 控制 下 切换 不 同 
的 样式 表 。 


12.1 fEHu S EGER 


可 折 且 菜单 〈sliding menu ) 是 一 种 简单 的 用 户 界面 组 件 ， 可 以 利用 它 在 页 面 上 放置 许多 信息 ， 同 
时 又 不 会 使 页 面 显得 太 混 乱 。 用 户 每 次 可 以 只 在 需要 时 查看 他 们 想 要 看 的 额外 信息 。 脚 本 12-1 包含 
HTML, 脚本 12-2 包含 CSS， 脚 本 12-3 包含 JavaScript， 如 下 所 示 。 


脚本 12-1 这 是 一 个 包含 许多 链接 的 简单 HTML 页 面 


<!DOCTYPE html» 
<html> 
<head> 
<title>Shakespeare's Plays</title> 
<link rel="stylesheet" href="script01.css"> 
<script src="script01.js"></script> 
</head> 
<body> 
«hi»Shakespeare's Plays</h1> 
<div> 
«a href="menu1.html" class="menuLink">Comedies</a> 
«ul class-"menu" id="menu1"> 
<li><a href-"pgi.html"»All's Well That Ends Well«/a»«/li» 
<li><a href="pg2.html">As You Like It«/a»«/li» 
<li><a href-"pg3.html"»Love's Labour's Lost«/a»«/li» 
<li><a href-"pg4.html"»The Comedy of Errors«/a»«/li» 
</ul> 
</div> 
<div> 
«a href-"menu2.html" class="menuLink">Tragedies</a> 
«ul class-"menu" id-"menu2"» 
<li><a href="pg5.html">Anthony &amp; Cleopatra«/a»«/li» 
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<li><a href-"pg6.html"»Hamlet«/a»«/li» 
<li><a href-"pg7.html"»Romeo &amp; Juliet</a></li> 
</ul> 
</div> 
<div> 
«a href-"menu3.html" class-"menulink"»Histories«/a» 
«ul class-"menu" id-"menu3"» 
<li><a href-"pg8.html"»Henry IV, Part 1«/a»«/li» 
<li><a href-"pg9.html"»Henry IV, Part 2«/a»«/li» 
«/ul» 
«/div» 
«/body» 
«/html» 


脚本 12-2 ”实现 可 折 县 菜单 效果 并 不 需要 很 多 CSS 


body { 
background-color: #FFF; 
color: #000; 


} 


div { 
margin-bottom: 10px; 


ul.menu { 
display: none; 
list-style-type: none; 
margin-top: 5px; 


a.menuLink { 
font-size: 16px; 
font-weight: bold; 
} 


脚本 12-3 ”这 个 脚本 可 以 控制 文本 (和 链接 ) 的 出 现 和 消失 


window.onload = initAll; 


function initAll() { 
var alllinks = document.getElementsByTagName("a") ; 
for (var i=0; i«alllinks.length; i++) ( 
if (allLinks[i].className.indexOf("menuLink") > -1) { 
allLinks[i].onclick = toggleMenu; 
} 
} 
} 


function toggleMenu() { 
var startMenu = this. href. lastIndex0f("/")+1; 
var stopMenu = this.href.lastIndexOf("."); 


var thisMenuName = this.href.substring(startMenu, stopMenu) ; 
var thisMenu = document.getElementById(thisMenuName) .style; 
if (thisMenu.display == "block") { 

thisMenu.display = "none"; 


else { 
thisMenu.display = "block"; 
} 


return false; 
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> FA A) a ee 








1. var allLinks = document.getElementsByTagName("a") ; 








当 页 面 加 载 时 ， 调 用 initAl1() 函 数 ， 它 首先 创建 一 个 包含 页 面 上 所 有 链接 的 数组 。 











2. for (var i-0; i<allLinks.length;i++) { 
if (allLinks[i].className.indexOf("menuLink") > -1) { 
allLinks[i].onclick = toggleMenu; 


} 


在 找到 了 所 有 链接 之 后 ， 对 它们 进行 遍历 ， 查 找 具 有 menulink 类 的 链接 ， 并 且 给 这 些 链 接 添加 
onclick 处 理 程序 。 在 这 里 ，onclick 处 理 程序 设置 为 在 单 击 链接 时 调用 toggleMenu() 函数 。 


3. var startMenu = this.href.lastIndexOf("/")«1; 
var stopMenu = this.href.lastIndexOf("."); 





在 toggleMenu() P , JavaScript 给 出 了 this; 在 这 里 , this 是 用 户 单 击 的 链接 对 象 , 因此 this.href 





是 完整 的 链接 URL. 但 是 , 我 们 只 需要 最 后 一 个 正 斜 杜 和 最 后 一 个 点 号 之 间 的 部 分 ( 也 就 是 说 ,如果 





链接 指向 http:/www.javascriptworld.com/index.html, 那么 我 们 只 需要 index ), 所 以 我 们 创建 startMenu 
和 stopMenu 变量 , 并 且 将 它们 设置 为 this.href 中 的 两 个 位 置 , 我 们 将 根据 这 两 个 位 置 找到 组 成 菜单 











名 的 字符 串 。 
4. var thisMenuName = this.href.substring(startMenu, stopMenu) ; 
我 们 需要 的 菜单 名 在 这 两 个 位 置 之 间 ， 所 以 在 这 里 设置 它 。 
5. var thisMenu = document.getElementById(thisMenuName).style; 
我 们 使 用 getElementById() 方 法 将 thisMenu 变量 设置 为 所 需 的 菜单 。 


6. if (thisMenu.display == "block") { 
thisMenu.display = "none"; 


























else { 
thisMenu.display = "block"; 

) 

如 果 thisMenu 的 display 属性 是 block， 那 么 这 行 代 码 将 它 设置 为 none。 或 者 如 果 它 是 none, Wè 
把 它 改 为 block。 这 样 就 会 在 菜单 的 显示 状态 和 折 受 状态 之 间 进 行 切换 ， 见 图 12-1 和 图 12-2。 

(B) Shakespeare's Plays - Mozilla Firefox So) (B) Shakespeare's Plays - Mozilla Firefox So) 
ORe ka Cear a oe (rma 
|_| Shakespeare's Plays E |.) Shakespeare's Plays |+ - 


Comedies 
All's Well That Ends Well 
As 





Done 

















De 








Shakespeare's Plays Shakespeare's Plays 




















图 12-1 PRERADE 12-2 ”在 单 击 之 后 ， 菜 单 展开 ， 


额外 的 选择 出 现 了 
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7. return false; 

最 后 ,返回 false 值 ， 因 为 toggleMenu() esi E h FEHER Ef T onclick 事件 处 理 程序 而 
调用 的 。 当 返回 false 时 ， 浏 览 器 窗口 就 不 会 加 载 href 属性 指向 的 页 面 ， 所 以 访问 者 会 留 在 原来 
的 页 面 上 。 


12.2 WA 


Ti— Füti—45 pig grec, PRAT ABAD, “ROR AR, (AIRES PRISE, pA 
让 网 页 看 起 来 像 应 用 程序 "。 其 实 ， 在 前 一 个 示例 和 下 拉 菜 单 之 间 并 没有 很 大 差异 。 实 际 上 ，HTML 
是 相同 的 (请 参考 脚本 12-1), CSS 见 脚本 12-4, JavaScript 见 脚本 12-5. 


脚本 12-4 ”只 需 多 加 一 点 儿 CSS 和 JavaScript， 就 可 以 让 菜单 具有 更 传统 的 外 观 


body { 
background-color: #FFF; 
color: #000; 









































div { 
margin-bottom: 10px; 
width: 20em; 
background-color: #9CF; 


ul.menu { 
display: none; 
list-style-type: none; 
margin: 0; 
padding: 0; 


ul.menu li ( 
font: 1em arial, helvetica, sans-serif; 
padding-left: 10px; 


a.menuLink, li a ( 
text-decoration: none; 
color: #006; 


) 


a.menuLink { 
font-size: 1.2em; 
font-weight: bold; 
} 


ul.menu li a:hover { 
background-color: #006; 
color: #FFF; 
padding-right: 10px; 


脚本 12-5 ”这 个 脚本 将 一 般 的 链接 转换 为 下 拉 莱 
window.onload = initAll; 


function initAll() { 
var allLinks = document.getElementsByTagName("a"); 
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for (var i=0; i«alllinks.length; i++) { 
if (allLinks[i].className.indexOf("menuLink") > -1) { 
allLinks[i].onmouseover = toggleMenu; 
allLinks[i].onclick = function() { 
return false; 


} 


function toggleMenu() { 
var startMenu = this.href.lastIndexOf("/")«1; 
var stopMenu = this.href.lastIndexOf("."); 
var thisMenuName = this.href.substring(startMenu, stopMenu) ; 


document. getElementById(thisMenuName).style.display = "block"; 


this.parentNode.className = thisMenuName; 
this.parentNode.onmouseout = function() { 


document .getElementById(this.className).style.display = "none"; 
this.parentNode.onmouseover = function() { 
document .getElementById(this.className).style.display = "block"; 


} 
> 添加 下 拉 菜 单 


1. allLinks[i].onmouseover = toggleMenu; 
allLinks[i].onclick = function() { 
return false; 











在 这 里 ， 并 不 像 前 面 那样 添加 onclick 处 理 程序 来 调用 toggleMenu(), ， 而 是 让 onclick 总 是 返 
E] false 一 一 我 们 不 希望 它 进行 任何 操作 。 相 反 , 我 们 将 让 onmouseover 调用 toggleMenu() ， 这 意味 着 
当 用 户 将 鼠标 移动 到 这 个 链接 上 时 ， 荣 单 就 会 展开 ( 见 图 12-3 )。 


eoo Shakespeare's Plays 
it] GEO hup://dl.dropbox.com/u/212; © | (ax co )» 





























Shakespeare's Plays 


Comedies 


Tragedies 
Anthony & Cleopatra 
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Romeo & Juliet 


Histories 














Go to "http:/ /di.dropbox.com/u/2127486/jsvas&/ch12/pg7.html" A 
图 12-3” 当 把 鼠标 移动 到 链接 上 时 ,菜单 就 会 展开 ,并且 突 出 显示 鼠标 指针 下 的 选项 


2. document.getElementById(thisMenuName).style.display = "block"; 

在 toggleMenu() 中 ， 我 们 并 不 像 前 面 那样 进行 状态 切换 。 现 在 ， 只 需 将 菜单 设置 为 显示 状态 。 

3. this.parentNode.className = thisMenuName; 

让 菜单 显示 之 后 ， 必 须知 道 什么 时 候 应 该 让 它 消失 。 下 拉 菜 单 的 特点 是 ， 当 鼠标 离开 触发 菜单 的 
链接 时 ， 并 不 希望 关闭 菜单 ， 只 有 在 鼠标 离开 整个 div 时 ， 才 应 该 关闭 菜单 。 也 就 是 说 ， 如 果 鼠 标 还 
在 菜单 上 的 任何 位 置 , 它 就 应 该 打开 着 。 在 这 里 , 我 们 将 一 个 class 属性 分 配给 当前 链接 的 父 元 素 ( 即 
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包围 这 个 链接 的 div )， 这 样 就 能 够 跟踪 触发 最 初 切换 的 菜单 。 
有 一 个 技巧 : 如 果 执 行 到 这 里 ， 那 么 根据 定义 ， 鼠 标 指针 应 该 已 经 在 div 中 了 。 因 此 ， 只 需 设 置 
父 div ÉY onmouseover 事件 处 理 程序 ， 就 会 马上 触发 它 。 


4. this.parentNode.onmouseout = function() { 

















document.getElementById(this.className).style. display = "none"; 
} 
还 需要 告诉 父 div 什么 时 候 打 开 和 什么 时 候 关闭 ， 这 里 处 理 后 一 种 情况 。 并 不 把 div 设置 为 一 直 
打开 ， 而 是 在 鼠标 指针 离开 整个 div 区 域 时 把 它 设置 为 隐藏。 


5. this.parentNode.onmouseover = function() { 














document .getElementById(this.className).style.display = "block"; 



































} 
ee CAR) ean 的 确 ， 我 们 (@ Shakespeare's Plays - Mozilla Firefox a8 
在 前 面 的 步骤 2 中 已 经 这 样 做 了 ， 但 是 我 们 需要 File Edit View History Bookmarks Tools Help 
TEX EMU, UIS UT BEBE, KA GP ce x oO mt -| 
就 会 关闭 。 (| Shakespeare's Plays m - 
id Shakespeare's Plays 
口 在 这 些 菜单 中 有 一 点 需要 注意 :如果 你 仔 uu 


细 看 一 下 HTML, 就 会 发 现 链接 实际 上 在 





e All's Well That Ends Well 





<uUL> 和 <1i> 标 签 中 一 一 也 就 是 说 , 它们 是 e As You Like It 
无 序列 表 和 列表 项 。 如 果 用 户 的 浏览 器 不 ha ra 














支持 CSS ,那么 他 们 只 会 在 页 面 上 看 到 列 
K ( 见 图 12-4 )。 但 是 ， 如 果 浏 览 器 支持 





Tragedies 





e Anthony & Cleopatra 












































CSS, 就 可 以 使 用 CSS 让 这 些 列表 呈现 出 Mor 
我 们 需要 的 样式 , 其 效果 根本 不 像 是 一 般 out 
的 列表 。 * Henry IV, Part 1 
* Henry IV, Part 2 
12.3 ”改进 下 拉 菜 单 Don J 
看 到 前 一 个 示例 之 后 ， 你 可 能 会 说 ， “我 不 ”图 12-4 当 关闭 CSS 功能 时 ( 图 中 是 Firefox 中 的 效 
uci. 2| E 果 )， 菜 单 显示 为 它们 本 来 的 形式 : 简单 的 
简单 (甚至 不 需要 修改 JavaScript) ! 你 还 可 能 无 序列 表 














希望 给 习惯 使 用 键盘 进行 导航 的 用 户 提供 一 些 方便 。 下 面 就 看 看 如 何 实现 这 些 需 求 。 同 样 ， 不 需要 修 
改 HIML， 所 以 如 果 需 要 看 HIML ， 可 以 返回 到 脚本 12-1, 


> 改进 下 拉 菜 单 























1. float: left; 
很 简单 ， 只 需 在 每 个 菜单 div 的 CSS 中 添加 float:left;, ， 见 脚本 12-6 和 图 12-5。 这 样 就 可 以 把 
垂直 菜单 转换 为 水 平 菜单 ， 不 需要 修改 JavaScript. 
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脚本 12-6 只 需 在 CSS 中 添加 一 行 ， 菜 单 的 外 观 就 完全 不 一 样 了 
body { 
background-color: #FFF; 
color: #000; 
div { 
margin-bottom: 10px; 
width: 20em; 
background-color: #9CF; 
float: left; 
} 
ul.menu { 
display: none; 
list-style-type: none; 
margin: 0; 
padding: 0; 
ul.menu li { 
font: 1em arial, helvetica, sans-serif; 
padding-left: 10px; 
a.menuLink, li a ( 
text-decoration: none; 
color: #006; 
} 
a.menuLink { 
font-size: 1.2em; 
font-weight: bold; 
} 
Dr CEES 
ul.menu li a:hover { Tuc erp iell 5 
background-color: #006; 
color: #FFF; || B shakespeare lays > BS Se Pee Safety 
padding-right: 10px; Shakespeare's Plays 
2. alllinks[i].onclick - clickHandler; Ceme Lamour Los 
但 是 ， 如 果 和 希望 使 菜单 的 可 操作 性 更 强 ， 就 
- . H mi /dldropkox com/u/2127488/isvas8/ch12/pa html @ intemet | Protected Mode: On 4v Rime = 
需要 添加 一 点 儿 JavaScript 代码 ， 见 脚本 12-7, AL 
体 地 说 ， 需 要 在 onclick 事件 处 理 程序 中 添加 代 图 12-5 CSS 中 的 一 个 简单 修改 就 使 菜单 横 跨 页 面 ， 
` ` M H E 1 Tr 
码 ， 所 以 把 它 设置 为 函数 clickHandler。 而 不 是 在 左边 垂直 排列 





脚本 12-7 
window.onload = initAll; 


function initAll() { 














添加 一 点 儿 JavaScript 代码 ， 让 用 户 不 用 鼠标 也 能 够 操作 这 个 菜 


var allLinks = document.getElementsByTagName("a"); 


for (var i=0; i«alllinks.length; i++) ( 


if (allLinks[i].className.indexOf("menuLink") > -1) { 


allLinks[i].onmouseover = toggleMenu; 
allLinks[i].onclick = clickHandler; 
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function clickHandler(evt) { 
if (evt) { 
if (typeof evt.target == "string") { 
toggleMenu(evt, evt.target) ; 


else { 
toggleMenu(evt,evt.target.toString()); 


else { 
toggleMenu(evt,window.event.srcElement.href); 


return false; 


function toggleMenu(evt,currMenu) { 
if (toggleMenu.arguments.length « 2) ( 
var currMenu - this.href; 


var startMenu = currMenu.lastIndexOf("/")41; 
var stopMenu = currMenu.lastIndexOf("."); 
var thisMenuName - currMenu.substring(startMenu, stopMenu); 


var thisMenu = document.getElementById(thisMenuName); 
thisMenu.style.display - "block"; 


thisMenu.parentNode.className - thisMenuName; 
thisMenu.parentNode.onmouseout - function() ( 
document.getElementById(this.className).style.display - "none"; 


thisMenu.parentNode.onmouseover = function() { 
document.getElementById(this.className).style.display - "block"; 


j 

3. function clickHandler(evt) ( 

这 是 事件 处 理 程序 ， 传 递 的 是 evt 参数 。 正 如 前 几 个 示例 中 提 到 的 ， 有 些 浏览 絮 传 递 
有 些 不 传递 。 

4. if (evt) { 


if (typeof evt.target -- "string") ( 
toggleMenu(evt,evt.target); 














iini 





PEM, 


else { 
toggleMenu(evt, evt.target.toString()); 


else { 
toggleMenu(evt,window.event.srcElement.href); 


return false; 
这 些 代码 处 理 浏览 器 在 事件 传递 机 制 方面 的 差异 。 首 先 ， 检查 是 否 有 事件 对 象 一 一 也 就 是 evt 是 

否 存 在 。 如 果 有 事件 对 象 存 在 , 就 检查 它 的 target 属性 是 否 是 一 个 字符 串 ， 因 为 我 们 需要 字符 串 形式 
的 目标 。 如 果 它 是 字符 串 ， 就 把 事件 和 它 的 目标 传递 给 toggleMenu()。 
如 果 target 属性 不 是 字符 串 , 就 通过 调用 tostring() 方 法 把 它 转换 为 字符 串 , 然后 使 用 这 个 字符 
B (和 evt) 作为 toggleMenu() 的 参数 。 

最 后 ,如 果 没 有 事件 对 象 ,就 向 toggleMenu() 传 递 一 个 伪 evt 对 象 和 window.event.srcElement .href 
(这 是 IE 存储 我 们 需要 的 值 的 位 置 ) 。 
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5. function toggleMenu(evt,currMenu) { 


if (toggleMenu.arguments.length < 2) { 
var currMenu = this.href; 











这 段 代 码 负责 处 理 菜 单 的 显示 和 隐藏 ， 因 为 单 击 和 鼠标 移动 都 可 以 触发 菜单 的 显示 ， 所 以 
toggleMenu() 比 较 复 杂 。 这 个 函数 有 两 个 参数 , fH JavaScript 的 函数 有 一 个 重要 的 特点 : 即使 函数 期 
望 传递 两 个 参数 ， 也 并 不 意味 着 必须 传递 两 个 参数 。 实 际 上 ， 由 于 我 们 编写 toggleMenu() 的 方式 ， 它 
可 以 应 对 3 种 情况 。 
口 当 浏 览 器 是 IE 并 通过 鼠标 触发 toggleMenu() 时 ， 不 传递 参数 。 

D 当 浏 览 咒 不 是 下 并 通过 鼠标 触发 toggleMenu() 时 ,传递 一 个 参数 (event 对 象 ) 。 
O 当 通 过 clickHandler() 调 用 toggleMenu() 时 ,传递 两 个 参数 ( event 对 象 和 菜单 名 ) 。 

如 果 不 传递 参数 或 只 传递 一 个 参数 C 可 以 通过 查看 toggleMenu.arguments.length 来 检查 ) ,就 说 
明 可 以 通过 this href 找到 菜单 名 ; 换 名 话说， 应 该 采用 与 以 前 一 样 的 方式 。 但 是 ， 因 为 需要 这 个 值 
在 currMenu 中 ， 所 以 要 存储 它 。 


6. var startMenu = currMenu.lastIndexOf("/")41; 


var stopMenu = currMenu.lastIndexOf("."); 
var thisMenuName - currMenu. substring(startMenu, stopMenu); 


同样 ， 要 计算 startMenu, stopMenu 和 thisMenuName， 但 是 这 一 次 是 根据 currMenu 进行 计算 。 


7. var thisMenu = document.getElementById(thisMenuName); 
thisMenu.style.display = "block"; 


因为 不 能 总 是 仅 引用 this ( 如 果 通 过 单 击 触发 这 个 函数 ，this 引用 的 东西 可 能 不 合适 ) ,所 以 把 
当前 菜单 存储 在 thisMenu 中 ， 然 后 像 以 前 一 样 让 它 显示 出 来 。 

8. thisMenu.parentNode.className = thisMenuName; 

最 后 ， 必 须 修改 父 节 点 的 类 名 ， 让 它 与 菜单 的 id 匹配 。 

v 提示 

口 需要 使 用 键盘 访问 菜单 项 的 不 仅仅 是 育 人 用 户 。 有 些 人 喜欢 使 用 键盘 ,而 且 有 些 浏览 器 C 比如 
移动 设备 中 的 浏览 器 ) 无 法 按照 菜单 需要 的 方式 处 理 鼠 标 移 动 。 考 虑 可 访问 性 总 是 好 想法 , 使 
用 JavaScript 或 新 奇 的 特性 不 应 该 成 为 忽视 各 种 用 户 的 特殊 需要 的 借口 。 

O 在 这 个 示例 中 ， 在 菜单 项 上 敲 击 键 盘 会 展开 菜单 ， 但 是 关闭 菜单 需要 使 用 鼠标 。 


12.4 ” 带 说 明 的 幻灯 片 


尽管 像 脚本 4-18 和 脚本 4-19 那样 的 幻灯 片 很 方便 ， 但 是 如 果 可 以 显示 随 图 像 改 变 的 说 明 ， 就 更 
好 了 。 脚 本 12-8 (HTML )、 脚 本 12-9 (CSS ) 和 脚本 12-10 (JavaScript ) 给 出 一 个 这 样 的 幻灯 片 示例 
(显示 的 是 我 们 夏天 度假 时 拍 的 照片 )。 在 这 个 示例 中 ,我 们 将 演示 如 何 将 前 面 见 过 的 不 同 技术 组 合 在 
一 个 脚本 中 。 


脚本 12-8 约 灯 片 HTML 页 面 


<!DOCTYPE html» 
<html> 
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<head> 
<title>Our Summer Vacation!</title> 
<link rel="stylesheet" href="script04.css"> 
«script src="script04.js"></script> 
</head> 
<body> 
<h1>0ur Summer Vacation Slideshow</h1> 
<img src="images/slideImgO. jpg" alt-"Our Vacation Pix" id="slideshow"> 
<div id="imgText"> </div> 
<div id="chgImg"> 
<input type="button" id="prevLink" value="&laquo; Previous"> 
<input type-"button" id="nextLink" value="Next &raquo;"» 


</form> 
</body> 
</html> 
脚本 12-9 脚本 12-8 调用 的 外 部 CSS 
body { 


background-color: #FFF; 
color: #000; 
font: 12px verdana, arial, helvetica,geneva, sans-serif; 


} 
h1 { 
font: 24px "trebuchet ms", verdana,arial, helvetica, geneva, sans-serif; 
margin-left: 100px; 
#chgImg { 
margin-left: 100px; 
clear: both; 
} 


#slideshow { 
padding: O 10px 10px 10px; 
float: left; 
height: 240px; 
width: 320px; 
) 


#imgText ( 
padding: 10px O O 10px; 
float: left; 
width: 200px; 
height: 150px; 
border-top: 1px #000 solid; 
border-left: 1px solid #000; 
} 


脚本 12-10 ”这 个 约 灯 片 脚本 显示 照片 和 说 明 
window.onload = initAll; 


var currImg = 0; 
var captionText = [ 
"Our ship, leaving Vancouver.", 
"We took a helicopter ride at our first port, Juneau.", 
"The helicopter took us to Mendenhall Glacier.", 
"The happy (and chilly) couple, on the glacier.", 
"Here's what our second stop, Ketchikan, looked like from the ship.", 
"We got to cruise through Glacier Bay. It was absolutely breathtaking!", 
"In Skagway, we took a train up into the mountains, all the way to the Canadian Border.", 
"Looking back down at Skagway from the train.", 
"On a trip this romantic, I shouldn't have been surprised by a proposal, but I was(obviously, I said yes)." 
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"It's nice to go on vacation, but it's nice to be home again, too." 


[n 


function initAll() { 
document.getElementById("imgText").innerHTML - captionText[0]; 
document.getElementById("prevLink").onclick = function() { 
newSlide(-1); 


document. getElementById("nextLink").onclick = function() { 
newSlide(1); 


} 


function newSlide(direction) { 
var imgCt = captionText. length; 


currImg = currImg + direction; 
if (currImg < 0) { 
currImg = imgCt-1; 


if (currImg == imgCt) { 
currImg = 0; 


document. getElementById("slideshow").src = "images/slideImg" + currImg + ". jpg"; 
document .getElementById("imgText").innerHTML = captionText[currImg]; 


} 

> 创建 带 说 明 的 幻灯 片 

1. document.getElementById("imgText").innerHTML = captionText[0]; 

initAl1() 函 数 需要 设置 3 个 东西 : 第 一 张 幻灯 片 的 照片 说 明 〈 放 在 imgText 区 域 中 )， 以 及 前 进 
和 后 退 按钮 的 onclick 处 理 程序 ( 见 下 面 的 步骤 )。 


2. document.getElementById("prevLink").onclick = function() { 
newSlide(-1); - 
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document a ee al Ja 
onclick = function() 
newSlide(1); 


Our Summer Vacation FED @ ~ Pager Safety 








Our Summer Vacation Slideshow 








We got to cruise through 
Glacier Bay. It was absolutely 
reathtaking! 


这 就 是 这 两 个 函数 的 全 部 ( 至 少 是 大 部 分 ) 
操作 。 我 们 可 以 建立 复杂 的 代码 ， 根 据 单 击 的 
按钮 决定 是 前 进 还 是 后 退 。 但 是 不 需要 这 么 做 ， 
只 需 建立 两 个 都 调用 newSlide() 的 函数 。 这 两 
个 函数 调用 的 区 别 是 : 一 个 调用 传递 1, 另 一 个 









































调用 传递 -1 这 个 参数 让 newSlide() 知 道 移动 [x @ Internet | Protected Mode: On fà Aw% v 
的 方向 。 图 12-6 ”这 个 脚本 决定 要 显示 的 照片 和 说 明 





3. document.getElementById("slideshow").src = "images/slideImg" + currImg + ".jpg"; 
document.getElementById("imgText").innerHTML = captionText[currImg]; 

这 个 步骤 同时 改变 图 像 和 对 应 的 说 明 ， 图 12-6 显示 其 结果 。 

V 提示 

O 对 captionText 及 其 语法 感到 疑惑 吗 ? 回忆 一 下 之 前 我 们 说 过 的 : 条 条 大 路 通 罗 马 ， 在 
JavaScript 中 ， 声 明 新 数组 的 方法 不 止 一 种 ， 这 一 点 儿 都 不 奇怪 。 下 面 两 种 声明 方式 的 结果 是 


一 模 一 样 的 : 
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var dice=new Array(1,2,3,4,5,6); 
和 
var dice=[1,2,3,4,5,6]; 


DFAT SAB AT DA AE MS TT E EL A, 


12.5 ”一 个 无 聊 的 姓名 生成 器 


你 以 前 可 能 见 过 一 些 无 聊 的 Web 程序 , 它们 接受 你 的 姓名 并 且 将 它 转换 为 一 个 新 姓名 ,比如 超级 
英雄 的 姓名 或 《黑道 家 族 》( The Sopranos ) 影 剧 角色 的 姓名 。 我 们 想 证 明 这 是 很 荒 廖 的 ， 所 以 通过 脚 
本 12-11 和 脚本 12-12 演示 如 何 生 成 这 种 无 聊 的 姓名 。 在 这 个 过 程 中 ， 你 会 看 到 如 何 将 字符 串 处 理 、 
数组 、 错 误 检查 和 表单 验证 组 合成 一 个 很 无 聊 的 脚本 。 


脚本 12-11 ”可 以 在 这 个 网 页 中 输入 你 的 真实 姓名 ， 然 后 就 会 得 到 无 聊 的 姓名 


<!DOCTYPE html» 
<html> 
<head> 
<title>Silly Name Generator</title> 
«script src="script05.js"></script> 
</head> 
<body> 
«hi»What's your silly name?«/hi» 
«table» 
<tr> 
<td class="rtAlign">First Name:</td> 
<td><input type="text" id="fName" size="30"></td> 
</tr> 
<tr> 
<td class="rtAlign">Last Name:</td> 
<td><input type="text" id-"lName" size="30"></td> 
</tr> 
<tr> 
<td>&nbsp; </td> 
<td><input type="submit" value-"Submit" id-"sillySubmit"» 
</tr> 
</table> 
<p id="msgField">&nbsp; </p> 
</body> 
</html> 


脚本 12-12 ”这 个 脚本 根据 用 户 输入 的 名 和 姓 中 的 字符 ， 从 三 个 数组 生成 无 聊 的 姓名 
window.onload = initAll; 


function initAll() { 
document. getElementById("sillySubmit").onclick = function() ( 
document. getElementById("msgField").innexHTML = getSillyName(); 
return false; 





























} 


function getSillyName() { 
var firstName = ["Runny", "Buttercup", "Dinky", "Stinky", "Crusty", "Greasy","Gidget", "Cheesypoof", 
—"Lumpy","Wacky", "Tiny", "Flunky", "Fluffy","Zippy", "Doofus", "Gobsmacked","Slimy", "Grimy", 


"non "omn 


—"Salamander","Oily", "Burrito", "Bumpy", "Loopy","Snotty", "Irving", "Egbert"]; 
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var lastNamei = ["Snicker", "Buffalo","Gross", "Bubble", "Sheep", "Corset","Toilet", "Lizard", 
—"Waffle","Kumquat", "Burger", "Chimp", "Liver","Gorilla", "Rhino", "Emu", "Pizza","Toad", "Gerbil", 
—"Pickle", "Tofu","Chicken", "Potato", "Hamster","Lemur", "Vermin"]; 

—var lastName2 - ["face", "dip", "nose","brain", "head", "breath", "pants","shorts", "lips", "mouth", 
—"muffin","butt", "bottom", "elbow", "honker","toes", "buns", "spew", "kisser","fanny", "squirt", 


"non 


"chunks", "brains","wit", "juice", "shower"]; 


var firstNm = document.getElementById("fName").value.toUpperCase(); 
var lastNm = document.getElementById("lName").value.toUpperCase(); 
var validName - true; 


if (firstNm == "") { 
validName - false; 

j 

else ( 


var firstNum 
if (firstNum 

validName 
} 


} 


if (!validName) { 
document.getElementById("fName").focus(); 
document.getElementById("fName").select(); 
return "That's not a valid first name"; 


) 


if (lastNm == "") { 
validName = false; 


firstNm.charCodeAt(0) - 65; 
0 || firstNum > 25) { 
false; 


nat 


} 
else { 
var lastNumi = lastNm.charCodeAt(0) - 65; 
var lastNum2 = lastNm.charCodeAt ((lastNm.length-1)) - 65; 


if (lastNumi < 0 || lastNum1 > 25 || lastNum2 < 0 || lastNum2 > 25) { 
validName = false; 


} 


if (!validName) { 
document. getElementById("1Name").focus(); 
document. getElementById("1Name").select(); 
return "That's not a valid last name"; 


} 


return "Your silly name is " + firstName [firstNum] + " " + lastNamei1[lastNum1] + lastName2[lastNum2]; 


} 


=> 48 & JavaScript 技术 








1. document.getElementById("msgField").innerHTML = getSillyName(); 
return false; 
当 最 初 加 载 页 面 时 ， 将 submit 按钮 的 onclick 处 理 程序 设置 为 调用 一 个 函数 ， 这 里 是 这 个 函数 
的 内 容 。 首 先 ， 调 用 getsillyName()。 这 个 函数 返回 一 个 字符 串 值 ( 要 么 是 无 聊 名 ， 要 么 是 一 个 错 
误 消 息 )， 我 们 会 把 这 个 字符 串 写 到 页 面 上 。 然 后 返回 false， 这 样 onclick 就 不 会 尝试 将 表单 提交 
到 服务 器 。 
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2. vax firstNm = document.getElementById("fName").value.toUpperCase(); 
var lastNm = document.getElementById("lName").value.toUpperCase(); 


页 面 要 求 每 个 访问 者 在 文本 字段 中 输入 他 们 的 名 字 和 姓氏 。 当 提交 表单 时 ， 在 getsillyName() PK 
数 中 ， 首 先 将 名 字 和 姓氏 转换 为 全 大 写 ， 并 且 将 结果 存储 在 变量 firstNm 和 lastNm 中 。 

3. if (firstNm = ="") { 
validName = false; 















































页 面 要 求 访问 者 第 一 次 在 名 字 字 段 中 至 少 输入 一 个 字符 ， 所 以 在 这 里 进行 检查 。 请 记 住 ， 这 个 表 
达 式 的 意义 是 “如 果 firstNm 为 空 ， 那 么 ……”。 如 果 是 这 种 情况 ， 就 将 validName 设置 为 false。 

4. var firstNum = firstNm.charCodeAt(0) - 65; 

否则 ，charCodeAt () 方 法 从 字符 串 中 取出 一 个 字符 。 这 个 字符 的 位 置 取决 于 传递 给 方法 的 数字 参 
数 。 在 这 个 示例 中 ， 取 出 0 位 置 上 的 字符 ， 也 就 是 字符 串 中 的 第 一 个 字符 ( 请 记 住 ，JavaScript 从 0 
开始 编号 )， 并 且 返 回 这 个 字符 的 ASCH 值 。 大 写字 母 A 的 ASCII 值 为 65, Z 的 ASCII 值 为 90。 所 
以 将 返回 值 减 65 应 该 获得 0 ~ 25 的 值 ， 将 结果 保存 在 firstNum 中 


5. if (firstNum < O || firstNum > 25) ( 
validName - false; 





























水 
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如 果 用 户 输 入 的 名 字 并 非 以 A~Z 的 字符 开头 ， 那 么 就 没有 对 应 的 无 聊 名 。 所 以 ， 在 检查 姓氏 之 
前 ， 要 确保 首 字母 处 于 这 个 范围 中 。 如 果 不 满足 这 个 条 件 ， 就 将 validName 设置 为 falses 
6. if (!validName) { 


document . getElementById("fName").focus(); 
Mast eeen Atoy M ane .select(); 
return "That's not a valid first name"; 














在 这 里 检查 validName， 如 果 validName 是 false， 就 意味 着 用 户 输入 的 名 字 是 无 效 的 。 当 发 生 这 
种 情况 时 ， 我 们 将 输入 光标 放 进 这 个 字段 ， 选 择 这 个 字段 中 的 所 有 内 容 ， 并 且 返 回 上 一 个 错误 消息 。 
7.if (lastNm == "") { 
validName = false; 





与 名 字 一 样 ， 访 问 者 必须 在 姓氏 字段 中 输入 一 些 内 容 。 
8. var lastNum1 = lastNm.charCodeAt(O) - 65; 
var lastNum2 = lastNm.charCodeAt((lastNm.length-1)) - 65; 
为 了 找到 访问 者 的 无 聊 姓 氏 , 需要 找到 姓氏 的 第 一 个 字符 和 最 后 一 个 字符 的 ASCII 值 。 第 一 个 字 
符 的 处 理 与 步骤 4 中 相似 。 最 后 一 个 字符 是 通过 lastim 字符 串 的 长 度 减 1， 然 后 将 这 个 数字 传递 给 
charCodeAt () 方 法 找到 的 。 


9. if (lastNum1 < 0 || lastNum1 > 25 || lastNum2 < 0 || lastNum2 > 25) ( 
validName = false; 

















与 名 字 字 段 一 样 ， 必 须 确 保 姓氏 的 第 
件 ， 就 将 validName 再 次 设置 为 false。 














一 个 字符 和 最 后 一 个 字符 包含 A ~ Z 的 字符 ; 如 果 不 满足 条 
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10. if (!validName) { 
document . getElementById("lName").focus(); 
document . getElementById("lName").select(); 
return "That's not a valid last name"; 





























] B Silly Name Generator - Internet Explorer provided by Dell) lex] ES 
与 第 6 步 中 一 样 ， 如 果 姓氏 是 无 效 的 ， 就 向 用 户 显 示 错误 (OO eere bbk č > 

File Edit View Favorites Tools Hel 

it me e 


@ Silly Name Generator Shy A-E mh Pager 


+ firstName[firstNum] + | — 
—" "+ lastName1[lastNum1] + lastName2[lastNum2]; What's your silly name? 
如 果 通 过 了 所 有 测试 ， 就 要 计算 这 个 新 的 无 聊 名 了 。 因 为 RON Se 
已 经 将 字符 转换 为 0 ~ 25 的 数字 ， 所 以 可 以 将 结果 用 作 Last Namme: (Srith 
firstName, lastName1 和 lastName2 数组 的 索引 。 将 每 个 数组 查 | — | 
找 的 结果 依次 拼接 起 来 ， 并 且 在 名 字 和 姓氏 之 间 加 一 个 空格 。 | n Sa Gos 





11. return "Your silly name is 

























































































注意 ， 姓 氏 的 两 部 分 是 直接 拼接 的 ， 没 有 加 空格 。 完 成 之 后 ， S M 
将 这 个 姓名 返回 并 放 进 文档 中 ， 见 图 12-7. 图 12-7 产生 的 无 聊 名 
无 聊 名 


寻找 无 聊 名 的 方法 是 ， 获 得 名 字 的 第 一 个 字母 、 姓 氏 的 第 一 个 字母 和 姓氏 的 最 后 一 个 字母 ， 然 
EER 12-1 中 查找 它们 。 通 过 名 字 的 第 一 个 字母 找到 新 的 名 字 ， 通 过 姓氏 的 头 尾 字母 找到 新 姓氏 
的 两 个 部 分 

例如 ，Tom Pay T 对 应 于 新 名 字 Oily, Negrino 中 的 N fe O 产生 新 姓氏 Gorillahonker。Dori 
中 的 D 转换 为 Stinky, Smith 中 的 S 和 H 转换 为 Gerbilshorts。 因 此 ， 本 书 作者 的 无 聊 名 是 Oily 
Gorillahonker 和 Stinky Gerbilshorts。 


表 12-1 无 聊 名 表 








名 字 的 第 一 个 字母 姓氏 的 第 一 个 字母 姓氏 的 最 后 一 个 字母 
A runny snicker face 
B buttercup buffalo dip 
C dinky gross nose 
D stinky bubble brain 
E crusty sheep head 
F greasy corset breath 
G gidget toilet pants 
H cheesypoof lizard shorts 
I lumpy waffle lips 
J wacky kumquat mouth 
K tiny burger muffin 
L flunky chimp butt 
M fluffy liver bottom 
N zippy gorilla elbow 
Oo doofus rhino honker 
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(E) 
名 字 的 第 一 个 字母 姓氏 的 第 一 个 字母 姓氏 的 最 后 一 个 字母 
P gobsmacked emu toes 
Q slimy pizza buns 
R grimy toad spew 
S salamander gerbil kisser 
T oily pickle fanny 
U burrito tofu squirt 
V bumpy chicken chunks 
W loopy potato brains 
X snotty hamster wit 
Y irving lemur juice 
Z egbert vermin shower 


12.6 ”柱状 图 生成 器 














中 计算 它们 ， 


解释 了 如 何 创建 自 


图 表 是 显示 可 视 信息 的 好 方法 。 可 以 在 Adobe Photoshop 中 绘制 柱状 
但 是 对 于 可 能 需要 定期 更 新 的 动态 数据 ， 为 什么 不 月 
们 在 本 书 中 一 直 在 说 JavaScript 是 面向 对 象 的 ， 而 
己 的 自 定 义 对 象 。 下 面 


























图 ， 或 者 在 Microsoft Excel 
H JavaScript 实时 地 生成 它们 呢 ? 我 
且 在 本 书 中 许多 地 方 都 使 用 了 对 象 ， 但 是 只 简要 地 
这 个 示例 更 深入 地 演示 对 象 的 工作 方式 ， 见 脚本 12-13 


















































(HTML )、 脚 本 12-14 (CSS ) 和 脚本 12-15 ( JavaScript )。 


脚本 12-13 ”柱状 图 生成 器 的 HTML 页 面 


<!DOCTYP 
<html> 
<head> 


E html» 


«title»Bar Chart Display«/title» 
«link rel="stylesheet"href="script06.css"> 
«script src="script06.js"></script> 


«/head» 

«body» 

«div id- 
Cho 
«in 
«in 
«p» 
Cho 
<in 
<in 
<in 
<p> 


"chartType"> 

ose a chart<br> 
put type="radio" 
put type="radio" 
<br></p> 

ose a color<br> 
put type="radio" 
put type="radio" 
put type="radio" 
<br></p> 


name="type"value="browser" checked="checked">Browser Usage<br> 
name="type"value="platform"> JavaScript Usage<br> 


name-"color"value-"lilRed.gif" checked="checked">&nbsp;Red<br> 
name-"color"value-"lilGreen.gif"» Green<br> 
name-"color"value-"lilBlue.gif"» Blue<br> 


Choose a direction<br> 


<in 
<in 
</div> 


put type="radio" 
put type="radio" 





name-"direction"value-"horizontal" checked="checked">Horizontal<br> 
name="direction"value="vertical"> Vertical 


«div id="chartArea">&nbsp; </div> 


</body> 
</html> 
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脚本 12-14 ”这 个 脚本 包含 柱状 图 示例 的 样式 


body { 
background-color: #FFF; 
color: #000; 
font-size: 12px; 





} 


#chartType { 
float: left; 
width: 200px; 


} 


.vert { 
text-align: center; 
vertical-align: bottom; 


th { 
font-size: 16px; 
padding-left: 20px; 
padding-right: 15px; 


.vert th { 
border-left: 1px #000 solid; 
border-bottom: 1px #000 solid; 
padding-bottom: 20px; 


-horiz th { 
border-right: 1px #000 solid; 
} 


.horiz img { 
height: 15px; 
vertical-align: bottom; 


} 


.vert img { 
width: 15px; 
padding-left: 10px; 
padding-right: 10px; 


tr.vert 4 tr.vert ( 
padding-bottom: 20px; 








脚本 12-15 ”这 是 绘制 柱状 图 的 代码 
window.onload = initAll; 


function initAll() { 
var radioButtons = document. getElementsByTagName("input") ; 


for (var i=0; i<radioButtons.length;i++) { 
if (radioButtons[i].type == "radio") { 
radioButtons[i].onclick = chgChart; 


} 
chgChart() ; 


function chgChart() { 
var bChart = { 
name: "Browser usage by year", 
years: [1998,1999, 2000, 2001, 2002, 2003, 2004, 2005 , 2006 , 2007, 2008, 2009], 
fieldnames: ["Netscape/Mozilla","MS IE","Other"], 
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fields: [ 
[38.9,31.9,21.2,12.4,6.6,5.1,3,1,6,11,14,17], 
[60.6,67.4,78.3,85.6,92.5,94.0,92,89, 90,84, 79,76], 

[0.5,0.5,0.5,2.1,0.9,1.0,4,9,3,5,5,6] 


var jsChart - ( 

name: "JavaScript usage by year", 

years: [1998,1999, 2000, 2001, 2002, 2003, 2004, 2005 , 2006, 2007, 2008, 2009], 

fieldnames: ["1.2 or later","1.0 - 1.1","No JavaScript"], 

fields: [ 
[63.4,66.5,78.4,80.2,88.1,89.1,94,89,96,95,94,93], 
[18.7,12.6,2.8,0.8,0.3,0.3,0,0,0,0,0,0], 
[17.9,21.0,18.8,19.0,11.6,10.6,4,9,3,4,5,6] 


) 


var radioButtons = document.getElementsByTagName(" input"); 
var currDirection - getButton("direction"); 
var imgSrc = "images/" + getButton("color"); 


if (getButton("type")--"browser") ( 
var thisChart - bChart; 


else ( 
var thisChart - jsChart; 


var chartBody = "<h2>"+thisChart.name+"</h2><table>"; 


for (var i-0; icthisChart. years. length; i++) { 
if (currDirection == "horizontal") { 

chartBody += "<tr class='horiz'><th rowspan='4'>"+thisChart.years[i]; 

chartBody += "</th><td colspan='2'></td></tr>"; 

for (var j-0; j«thisChart.fieldnames.length; j++) { 
chartBody += "<tr class='horiz'><td>"+thisChart.fieldnames[j]; 
chartBody += "</td><td><img alt-'horiz bar'src-'"«imgSrc; 
chartBody += "' width='"+thisChart. fields[j][i]*3+"'>&nbsp;&nbsp;"; 
chartBody += thisChart.fields[j][i]+"</td></tr>"; 


else { 
chartBody += "<tr class='vert'><th rowspan='2'>"+thisChart.years[i]+"</th>"; 
for (var j=0; j<thisChart.fieldnames.length; j++) { 
chartBody += "<td><img alt='vert bar' src='"+imgSrc; 
chartBody += "' height=""sthischart .fields[4][i1*3#* "></td>"; 


} 

chartBody += "</tr><tr class='vert'>"; 

for (j=0; j<thisChart.fieldnames. length; I 1 
chartBody += "<td>"+thisChart.fie ds 和 二 +"<br>"; 
chartBody += thisChart.fieldnames[j]+"<br><br></td>"; 


) chartBody += "</tr>"; 
} 


chartBody += "</table>"; 
document. getElementById("chartArea").innerHTML = chartBody; 


function getButton(buttonSet) { 
for (var i=0; i<radioButtons.length;i++) { 
if (radioButtons[i].name == buttonSet && radioButtons[i].checked) { 
return radioButtons[i].value; 


return -1; 
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仿生 成 柱状 图 


1. var radioButtons = document.getElementsByTagName("input") ; 








for (var i-0; i«radioButtons. length; i++) { 
if (radioButtons[i].type == "radio") { 
radioButtons[i].onclick = chgChart; 


chgChart(); 


首先 执行 initAl1() 函 数 。 在 这 里 ， 我 们 获得 所 有 单 选 按钮 并 且 遍 历 它们 ， 将 它们 设置 为 在 单 和 
时 调用 chgChart()。 在 此 之 后 ， 手 工 调用 chgChart() 来 显示 页 面 的 默认 视图 。 

2. var bChart = { 

在 chgChart() 中 ,我们 创建 了 第 一 个 自 定义 对 象 bChart[browser chart (浏览 器 图 表 ) 的 缩写 ]。 创 
建 对 象 就 是 这 么 简单 。 

3. name: "Browser usage by year", 


years: [1998,1999, 2000, 2001, 2002, 2003, 2004, 2005 , 2006, 2007, 2008, 2009], 
fieldnames: i 'Netscape/Mozilla", "MS IE", "Other" | 
fields: [ 














oir 























4,6.6,5.1,3,1,6,11,14,17], 


38.9,31.9,21.2,12. 
60.6,67.4,78.3,85.6,92. 5. 94.0, 92, 89, 90, 84, 79,76], 
[0.5,0.5,0.5,2.1,0.9,1. 0,4,9,3,5,5,6] 














这 里 创建 自 定 义 对 象 的 属性 , 并 且 通 过 赋值 对 它们 进行 初始 化 ,在 这 里 ,我 们 建立 了 bChart 的 name, 
years, fieldnames 和 fields 属性 。 这 些 字段 分 别 是 图 表 的 名 称 、 图 表 涉 及 的 年 份 、 图 表 值 的 3 个 标签 
nd, 分 别 表示 一 种 浏览 器 )。 

Ee, 在 每 个 属性 前 面 没有 使 用 var 关键 字 , 这 是 因为 它们 不 是 新 变量 , 而 是 在 一 个 现 有 变量 ( 即 
刚才 创建 的 对 象 ) 中 添加 的 新 属性 。 

新 属性 fields 之 所 以 使 用 两 层 方 括号 ,是 因为 它 是 一 个 二 维 数 组 。 我 们 可 以 用 bchart.fields[o][n] 
引用 第 一 行 ， 用 bchart.fields[1][n] 引 用 第 二 行 ， 用 bchart.fields[2][n] 引 用 第 三 行 。 


" 12 
结束 花 括号 表示 完成 创建 bChart WE. 


5. var jsChart = { 
name: "JavaScript usage by year", 


years: [1998,1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006 , 2007, 2008, 2009], 
fieldnames: ["1.2 or later","1.0 - 1.1","No JavaScript"], 






























































fields: [ 
[63.4,66.5,78.4,80.2,88.1,89.1,94,89,96,95,94, 93] 
[18.7,12.6,2.8,0.8,0.3,0.3,0,0,0,0,0,0], 
[17.9,21.0,18.8,19.0,11.6,10.6,4,9,3,4,5,6], 


现在 ， 按 照 创建 bChart 对 象 的 方式 ， 创 建 jsChart[JavaScript chart ( JavaScript 图 表 ) 的 缩写 ] 对 
象 并 且 分 配 它 的 属性 .对 于 JavaScript 图 表 , 也 需要 年 份 , 但 是 这 一 次 显示 的 数据 是 历年 支持 JavaScript 
特定 版 本 的 浏览 带 的 百分比 。 


F 
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6. var radioButtons = document.getElementsByTagName("input"); 
var currDirection = getButton("direction"); 
var imgSrc = "images/" + getButton("color"); 


在 绘制 图 表 之 前 ,需要 知道 用 户 选择 了 哪个 单 选 按 钮 。radioButtons 数组 包含 页 面 上 的 所 有 输入 
元 素 ， 获 得 这 个 数组 之 后 ， 就 可 以 调用 getButton() 函 数 。 将 一 个 字符 串 〈 单 选 按钮 集 的 名 称 ) 传递 











给 getButton() PK 





数 ， 它 就 会 返回 一 个 字符 串 〈 这 个 单 选 按钮 集 的 当前 值 )。 

















可 以 在 getButton() 中 建立 radioButtons 数组 ， 而 不 是 在 这 里 。 但 是 采用 现在 这 种 方式 ， 就 只 需 
要 对 它 进 行 一 次 初始 化 ， 而 不 是 三 次 (每 次 调用 getButton() 时 执行 一 次 初始 化 )。 
7. if (getButton("type")=="browser") { 
var thisChart = bChart; 


else { 


var thisChart = jsChart; 





当 用 户 通过 单 击 任何 单 选 按钮 来 改变 

















图 表 时 ,调用 chgChart() 函 数 。 当 发 生 这 种 情况 时 ， 如 果 需 


要 浏览 器 图 表 ， 那 么 将 整个 bchart 对 象 存储 在 thisChart 中 。 和 否则 ， 就 要 显示 JavaScript 图 表 ， 所 以 
将 thisChart 赋值 为 jsChart 对 象 。 
8. var chartBody = "<h2>"+thisChart.name+"</h2><table>"; 
实际 的 绘制 代码 从 这 里 开始 。 首先 , 写 出 图 表 的 名 称 ( 存储 在 thisChart.name 中 , 显示 在 一 个 <h2> 
始 一 个 ktable> 标 签 。 从 这 里 开始 ， 将 在 chartBody 变量 中 添加 内 容 ， 最 后 将 把 它 写 








标签 中 )， 然 后 开 
到 页 面 上 。 




















9. for (var i=0; i«thisChart.years.length; i++) { 


这 是 双 层 循环 的 第 一 层 , 我 们 用 这 两 个 循环 遍历 步 
又 3 中 建立 的 二 维 数组 。 这 个 外 层 循环 使 用 作为 索引 — Eten cl VME 
变量 ， 循 环 的 次 数 是 图 表 涉 及 的 年 份 数量 。 Lr iind 

10. if (currDirection--"horizontal") { 


如 果 用 户 希 望 看 到 图 表 的 水 平版 本 ( 见 图 12-8 ), 





就 运行 以 下 代码 。 


11. chartBody += "<tr class-'horiz'»«th rowspan- 


—'4'»" 
chartBody 
—«/tr»"; 











>j++) { 





这 是 内 层 循环 的 水 平版 本 。 这 个 内 层 循环 使 用 j 
作为 索引 变量 ， 循 环 的 次 数 是 存储 的 fieldnames 数 


组 的 元 素数 量 。 


13. chartBody += "<tr class-'horiz'» <td>"+ 


+thisChart.years[i]; 


每 个 水 平 图 表 的 第 一 行 包含 第 i 个 年 份 标签 。 
12. for (var j=0; j«thisChart.fieldnames.length; 








eoe Bar Chart Display 





























+= "</th><td colspan='2'></td> 

















thisChart.fieldnames[j]; 图 12-8 FEAR 








图 的 初始 水 平版 本 
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表格 的 细节 行 从 这 里 开始 。 首 先 写 出 值 标签 ( 浏览 器 类 型 或 JavaScript 版 本 )， 此 数据 存储 在 fieldnames 
数组 的 第 j 个 元 素 中。 

14. chartBody += "«/td»«td»«img alt='horiz bar' src='"+imgSrc; 

chartBody += "' width='"+thisChart.fields[j][i]*3+"'>&nbsp;&nbsp;"; 

接 下 来 , 结束 前 面 的 单元 格 并 且 计算 柱状 图 像 。 柱 状 图 像 的 颜色 取决 于 imgSrc, 宽度 是 数组 中 [j][i] 
元 素 的 值 乘 以 3。 例如 ， 如 果 imgSrc 是 lilBlue.gif, thisChart. fields[3][4] 是 30， 那 么 形成 的 图 像 
标签 会 绘制 一 个 蓝 色 的 宽 为 90 像素 的 矩形 。 

15. chartBody +=thisChart.fields[j][i]+"</td></tr>"; 

现在 ， 在 图 像 的 右边 写 出 实际 数据 值 ， 结 束 这 一 行 。 水 平 图 表 代 码 的 内 层 循 环 到 这 里 就 结束 了 。 

16. chartBody += "<tr class-'vert'»«th rowspan='2'>"+thisChart.years[i]+"</th>"; 

如 果 用 户 和 希望 看 到 图 表 的 垂直 版 本 ( 见 图 12-9 )， 那 么 首先 写 图 表 的 初始 行 。 图 表 的 垂直 版 本 要 
稍微 复杂 一 些 ， 而 且 需 要 两 个 独立 的 内 层 j 循环 。 这 里 写 出 图 表 的 标签 。 






















































































eoe Bar Chart Display 
Lala | LALA) LHO nip://di-dropbox.comu/21274 © |a Googe J 
Cede JavaScript usage by year 
O Browser Usage 
@ JavaScript Usage 
Choose a direction | l 
O Horizontal 
@ Vertical 634 18.7 179 
1998 > oriater 10- 1.1 No JavaScript 
65 — 126 2 
1999 | > or later 10- 11 No JavaScript 
= | 
4 28 18.8 
2000 | > or later 1.0 - 11 No JavaScript : 
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图 12-9 ”柱状 图 的 垂直 版 本 


























17. for (var j=0; j<thisChart.fieldnames.length; j++) { 
这 里 是 第 一 个 内 层 循环 。 它 在 一 行 中 绘制 图 上 的 所 有 线条 。 








246 9% 12% JavaScript 应 用 示例 





18. chartBody += "<td><img alt='vert bar' src='"+imgSrc; 
chartBody += "' height='"+ thisChart.fields[j][i]*3+"'></td>"; 
这 里 动态 地 编写 图 像 标签 。 这 一 次 , 高 度 值 基于 二 维 数组 中 的 值 。 例 如 , 如 果 imgSrc 是 lilGreen.gif, 
thisChart.fields[3][4] 是 30， 那 么 形成 的 图 像 标签 会 绘制 一 个 绿色 的 矩形 ， 高 为 90 像素 。 


19. chartBody += "</tr><tr class='vert'>"; 
绘制 完 图 上 的 所 有 线条 之 后 ， 结 束 这 个 表格 行 并 开始 一 个 新 行 。 
20. for (j=0; j<thisChart.fieldnames.length; j++) { 
这 是 第 二 个 内 层 循环 。 它 在 对 应 的 线条 下 面 写 出 每 个 数据 点 的 值 ， 然 后 写 出 了 轴 的 标签 。 
21. chartBody += "<td>"+thisChart.fields[j][i]+"<br>"; 
chartBody += thisChart.fieldnames [j]+"<br><br></td>"; 
这 里 写 出 每 个 线条 的 信息 。 数 组 元 素 thisChart.fields[j][i] 是 这 个 线条 的 值 thisChart. 
fieldnames[j] 是 它 的 数据 标签 。 
22. chartBody += "</tr>"; 
在 结束 最 后 一 个 内 层 循 环 之 后 ， 需 要 结束 最 后 的 行 标签 。 
23. chartBody += "</table>"; 
document .getElementById("chartArea").innerHTML = chartBody; 
现在 ,水 平和 垂直 代码 都 结束 了 ， 外 层 循环 也 结束 了 ， 所 以 写 出 最 后 的 表格 标签 以 结束 脚本 ， 然 
后 将 组 成 的 整个 字符 串 放 进 页 面 的 chartArea 部 分 的 innerHTML 属性 中 。 
v 提示 
口 这 里 的 代码 使 用 3 个 图 像 : lilRed.gif, lilBlue.gif 和 lilGreen.gif, 它们 都 是 具有 对 应 颜色 的 单 像 
素 的 GIF; HTML 允许 设置 图 像 的 高 度 和 宽度 ， 而 不 管 图 像 的 实际 尺寸 ， 所 以 可 以 用 单 像素 的 

到 像 创 建 任何 大 小 和 形状 的 线条 。 

O 可 能 读者 会 有 疑问 ， 水 平 栏 的 高 度 和 垂直 栏 的 宽度 都 是 在 脚本 12-14 的 CSS 文件 中 设置 的 。 

由 于 这 些 数值 是 静态 的 〈 它们 不 会 改变 )， 因 此 没有 必要 使 用 JavaScript 进行 实时 设置 。 

O 只 需 修改 步骤 3 ~ 5 中 的 数组 值 ， 就 可 以 将 这 个 图 表 改 为 显示 几乎 任何 数据 。 无 论 将 这 些 数 组 

设置 成 什么 ， 都 不 需要 修改 创建 图 表 的 循环 。 

D 这 些 图 表 中 的 统计 数据 来 自 The Counter’ s Global Statistics ( http://www.thecounter.com/stats/ ). 
但 是 ,这 些 数据 仅 从 1998 年 9 月 到 2009 年 12 月 ,所 以 1998 年 的 数字 是 从 9 月 开始 的 。 其 他 
所 有 年 份 的 数字 都 是 从 1 月 开始 的 。 

O 如 果 对 步 又 3 和 步骤 5 中 数组 的 代码 感到 陌生 ， 请 参考 脚本 12-10。 

口 如 果 对 创建 新 对 象 的 代码 感到 陌生 ， 建 议 回顾 脚本 10-11。 


12.7 ”样式 表 切 换 器 


JavaScript 最 强大 的 用 途 之 一 是 ， 在 运行 时 改变 页 面 所 使 用 的 样式 表 。 例 如 ， 可 以 向 站 点 的 访问 
者 提供 样式 选项 ， 从 而 允许 他 们 选择 站 点 上 文本 的 样式 和 大 小 。 一 些 人 喜欢 阅读 小 的 sans-serif 文本 ， 
这 样 就 能 够 在 屏幕 上 看 到 大 量 单词 ( 见 图 12-10), 而 其 他 人 喜欢 比较 大 的 serif 文本 , 这样 可 读 性 更 好 
( 见 图 12-11 )。 现 在 ， 可 以 让 这 两 类 访问 者 都 满意 。 甚 至 更 进 了 一 步 ， 这 个 脚本 还 使 用 cookie 存储 用 
户 的 选择 ， 这 样 用 户 以 后 访问 时 会 自动 采用 他 们 原来 选择 的 样式 。 
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sylechanger - Mozilla Firefox 





Eie Ek en Hitony Bookmarks Tools Hep 
G-c 4& (CI tips (at eropbox com/u/2177486 jg ch 


| L state changer 








Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 





@ Style Changer - Mozilla Firefox [e [e je Aenean lacus elit, volutpat vitae, egestas in, tristique ut, Change your font: 
Ele Edit. View History Bookmarks Tools Hep nibh. Donec congue lacinia magna. Duis tortor justo, 
B- c > (C). htp//dl dropboxconVu/212H86/jevasb/chiz/s vy. ~| [$B Googie 2| O | dapibus vel, vulputate sed, mattis sit amet, leo. Cras purus 
quam, semper quis, dignissim id, hendrerit eget, ante. Nulla z 
L Style Changer = =| id lacus eget nulla bibendum venenatis. Duis faucibus 
| be : : : 
^], adipiscing mauris. Integer augue. In vulputate purus eget enim. Nam odio eros, porta 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean capes ae AUR DAP B - P 
lacus elit; volutpat vitae, egestas in, tristique ut, ribh. Donec ar Tae vitae, bibendum sit amet, iaculis nec, elit. Cras egestas scelerisque pede. Donec a 
congue lacinia magna. Duis tortor justo, dapibus vel, vulputate tellus. Nullam consectetuer fringilla nunc. 
sed, mattis sit amet, leo. Cras purus quam, semper quis, dignissim T E 
id, hendrerit eget, ante. Nulla id lacus eget nulla bibendum Lg Sarif MEM 2 | g . g . 
Venenatis. Duis faucibus adipiscing mauris. Integer augue. In Nam varius metus congue ligula. In bac habitasse platea dictumst. In vt ipsum a pede 
vulputate purus eget enim. Nam odio eros, porta vitae, bibendum — — rhoncus convallis. Sed at enim. Integer sed metus quis est egestas vestibulum. 
sit amet, iaculis nec, elit. Cras egestas scelerisque pede. Donec a R n 3 . 
tellus. Nullam consectetuer fringilla nunc. Quisque mattis tortor a lorem. Nam diam. Integer consequat lectus. Donec molestie 
Nam varius metus congue ligula. In hac habitasse platea dictumst. In ut ipsum a pede rhoncus elementum nisl. Donec: igu a sapien, volutpat eget, dictum quis, mollis a, odio. A 
convallis. Sed at enim. Integer sed metus quis est egestas vestibulum. Quisque mattis tortor a Aliquam augue enim, gravida nec, tempor ac, interdum in, uma. Aliquam mauris. Duis 
lorem. Nam diam, Integer consequat lectus. Donec molestie elementum nisl. Donec ligula sapien, massa uma, ultricies id, condimentum ac, gravida nec, dolor. Morbi et est quis enim 
volutpat eget, dictum quis, mollis a, odio. Aliquam augue enim, gravida nec, tempor ac, interdum 机 à desea » SEN dis : 
in, urna. Aliquam mauris. Duis massa urna, ultricies id, condimentum ac, gravida nec, dolor. Morbi gravida nonummy. Cum sociis natoque penatibus et magnis dis parturient montes, 
et est quis enim gravida nonummy. Cum sociis natoque penatibus et magnis dis parturient nascetur ridiculus mus. Mantis nisl quam, &ncidunt ultrices, malesuada eget, posuere 


montes, nascetur ridiculus mus. Mauris nisl quam, tincidunt ultrices, malesuada eget, posuere 


eu, lectus. Nulla a arcu. Sed consectetuer arcu et velit. Quisque dignissim risus vel elit. eu, lectus. Nulla a arcu. Sed consectetuer arcu et velit. Quisque dignissim risus vel elit. 
































Done Donc 








12-10. 一 些 访问 者 喜欢 阅读 小 的 sans-serif 文本 , 图 12-11 其 他 访问 者 喜欢 选择 比较 大 的 serif 
这 样 就 能 够 在 页 面 上 看 到 更 多 的 文本 SOAS, 这样 可 读 性 更 好 


p^ 允许 用 户 切换 样式 表 


1. <link href="sansStyle.css"rel="stylesheet" title="default"> 
脚本 12-16 包含 一 个 到 外 部 样式 表 的 标准 链接 ,但 是 其 中 多 了 一 点 新 东西 : 它 有 一 个 title 
default。 这 会 在 后 面 的 操作 中 起 作用 。 


脚本 12-16 ”这 个 页 面包 含 页 面 内 容 和 用 户 控件 ， 它 调用 用 户 选 择 的 外 部 样式 表 


<!DOCTYPE html» 
<html> 
<head> 
<title>Style Changer</title> 
<link href-"scriptO7.css" rel-"stylesheet"» 
«link href-"sansStyle.css" rel="stylesheet" title-"default"» 
«link href="serifStyle.css" rel-"alternate stylesheet" title="serif"> 
<script src="script07.js"></script> 
</head> 
<body> 
<div class="navBar"><p>Change your font:</p> 
<input type="button" class-"typeBtn" value="Sm Sans" id="default">&nbsp;&nbsp; 
<input type="button" class="typeBtn2" value="Lg Serif" id="serif"> 
</div> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean lacus elit, volutpat vitae, egestas 
—in, tristique ut, nibh. Donec congue lacinia magna. Duis tortor justo,dapibus vel, vulputate sed, mattis 
—sit amet, leo. Cras purus quam, semper quis, dignissim id, hendrerit eget, ante. Nulla id lacus eget 
nulla bibendum venenatis. Duis faucibus adipiscing mauris. Integer augue. In vulputate purus eget enim. 
—Nam odio eros, porta vitae,bibendum sit amet, iaculis nec, elit. Cras egestas scelerisque pede. Donec 
—a tellus. Nullam consectetuer fringilla nunc.</p> 


















































<p>Nam varius metus congue ligula. In hac habitasse platea dictumst. In ut ipsum a pede rhoncus convallis. 
—Sed at enim. Integer sed metus quis est egestas vestibulum. Quisque mattis tortor a lorem. Nam diam. 
Integer consequat lectus. Donec molestie elementum nisl. Donec ligula sapien, volutpat eget, dictum 
—quis, mollis a, odio. Aliquam augue enim, gravida nec, tempor ac, interdum in, urna. Aliquam mauris. 
Duis massa urna, ultricies id,condimentum ac, gravida nec, dolor. Morbi et est quis enim gravida nonummy. 
一 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nisl 
—quam,tincidunt ultrices, malesuada eget, posuere eu, lectus. Nulla a arcu. Sed consectetuer arcu et 
—velit. Quisque dignissim risus vel elit.«/p» 


«p»Nunc massa mauris, dictum id, suscipit non, accumsan et, lorem. Suspendisse non lorem quis dui rutrum 
vestibulum. Quisque mauris. Curabitur auctor nibh non enim. Praesent tempor aliquam ligula. Fusce eu 
—purus. Vivamus ac enim eget urna pulvinar bibendum. Integer porttitor, augue et auctor volutpat, lectus 
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—dolor sagittis ipsum, sed posuere lacus pede eget wisi. Proin vel arcu ac velit porttitor pellentesque. 
—Maecenas mattis velit scelerisque tellus. Cras eu tellus quis sapien malesuada porta. Nunc nulla. Nullam 
—dapibus malesuada lorem. Duis eleifend rutrum tellus. In tempor tristique neque. Mauris rhoncus. Aliquam 
—purus.</p> 


<p>Morbi felis quam, placerat sed, gravida a, bibendum a, mauris. Aliquam porta diam. Nam consequat feugiat 
diam. Fusce luctus, felis ut gravida mattis, ante mi viverra sapien, a vestibulum tellus lectus ut massa. 
Duis placerat. Aliquam molestie tellus. Suspendisse potenti. Fusce aliquet tellus a lectus. Proin augue 
diam, sollicitudin eget, hendrerit non, semper at, arcu. Sed suscipit tincidunt nibh. Donec ullamcorper. 
—Nullam faucibus euismod augue. Cras lacinia. Aenean scelerisque, lorem sed gravida varius, nunc tortor 
—gravida odio, sed sollicitudin pede augue ut metus. Maecenas condimentum ipsum et enim. Sed nulla. Ut 
—neque elit, varius a, blandit quis, facilisis sed, velit. Suspendisse aliquam odio sed nibh.«/p» 

«/body» 

«/html» 


2. «link href-"serifStyle.css"rel-"alternate stylesheet"title="serif"> 
这 里 使 用 Link 标签 链接 男 一 个 样式 表 。 但是，rel 属性 没有 设置 为 通常 的 stylesheet ， 而 是 设置 为 
alternate stylesheet。 这 是 因为 这 个 样式 表 实 际 上 不 是 默认 样式 表 ， 而 是 只 在 用 户 选 择 它 时 使 用 。 


3. <input type="button" class-"typeBtn" value-"Sm Sans"id="default">&nbsp;&nbsp; 
«input type-"button"class-"typeBtn2"value-"Lg Serif" id-"serif"» 


这 是 两 个 按钮 : Sm Sans 和 Lg Serif. 单 击 前 一 个 按钮 , 就 会 使 页 面 上 的 所 有 文本 显示 为 小 的 sans-serif 
字体 ; 单 击 后 一 个 按钮 ， 就 会 使 页 面 上 的 所 有 文本 显示 为 比较 大 的 serif 字体 。 如 果 浏 览 器 支持 的 话 ， 
脚本 12-17 中 的 样式 会 使 按钮 文本 本 身 显示 为 目标 字体 ， 这 使 用 户 能 够 预先 看 到 选择 这 个 按钮 之 后 的 
文本 效果 。 


脚本 12-17 这 个 CSS 包含 总 是 加 载 的 样式 ， 无 论 选 择 哪 种 字体 

































































body { 
margin: O 20px; 
padding: 0; 


background-color: #FFF; 
color: #000; 


} 


div.navBar { 
background-color: #CCC; 
width: 175px; 
position: relative; 
top: -1.0em; 
right: -20px; 
float: right; 
padding: 20px O 20px 20px; 
border-left: 2px groove #999; 
border-bottom: 2px groove #999; 


} 
.typeBtn { 
font: 9px/10px verdana, geneva, arial,helvetica, sans-serif; 
.typeBtn2 { 
font: 14px/15px "Times New Roman",Times, serif; 
} 


4. body, p, td, ol, ul, select, span,div, input { 
font:.9em/1.1em verdana,geneva, arial, helvetica,sans-serif; 








脚本 12-18 (sansStyle.css ) 告诉 浏览 器 ， 在 装载 它 时 ， 它 涉及 的 所 有 标签 都 应 该 显示 为 0.9em 的 
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Verdana 字体 ( 或 者 用 户 计算 机 上 安装 的 其 他 sans-serif 字体 之 一 )。 
脚本 12-18 ”这 个 样式 表 (sansStyle.css ) 将 所 有 文本 改 为 小 的 sans-serif 字体 


body, p, td, ol, ul, select, span, div, input { 

font: .9em/1.1em verdana, geneva, arial,helvetica, sans-serif; 
} 
5. body, p, td, ol, ul, select, span,div, input { 


font: 1.1em/1.2em "Times New Roman", Times, serif; 
与 之 相反 ， 脚 本 12-19 (serifStyle.css) 告诉 浏览 器 ， 它 涉及 的 所 有 标签 都 应 该 显示 为 1.1em 的 
Times New Roman 字体 (或 者 可 以 找到 的 其 他 serif 字体 之 一 )。 


脚本 12-19 ”这 个 样式 表 ( serifStyle.css ) 将 页 面 文本 改 为 比较 大 的 serif 字体 


body, p, td, ol, ul, select, span, div, input { 
font: 1.1em/1.2em "Times New Roman",Times, serif; 





6. var thisCookie = cookieVal ("style"); 
if (thisCookie) { 
var title = thisCookie; 


else { 
var title = getPreferredStylesheet(); 


tte 
脚本 12-20 中 的 initstyle() 函 数 在 页 面 运行 时 加 载 , 它 的 目标 是 对 页 面 需 要 的 所 有 东西 进行 初始 
化 。 在 这 里 ,检查 这 个 用 户 是 否 已 经 设置 了 cookie (cookie 中 保存 他 选择 的 样式 )。 我 们 的 老 伙伴 
cookieVal() BOK AS 9 章 ， 它 读 取 cookie 并 且 检 查 是 否 有 称 为 style 的 cookie。 如 果 有 ， 它 的 值 就 
是 我 们 需要 的 样式 表 ; 如 果 没 有 ， 就 调用 getPreferredStylesheet()。 知 道 了 所 需 的 样式 表 之 后 ， 就 
调用 setActiveStylesheet() 来 设置 页 面 外 观 。 


脚本 12-20 ”这 个 脚本 处 理 当 前 样式 表 的 设置 


window.onload = initStyle; 
window.onunload = unloadStyle; 





















































function initStyle() { 
var thisCookie = cookieVal("style"); 
if (thisCookie) { 
var title = thisCookie; 


} 
else { 
var title = getPreferredStylesheet(); 


} 
setActiveStylesheet (title) ; 


var allButtons = document.getElementsByTagName(" input"); 
for (var i-0; i«allButtons.length; i++) { 
if (allButtons[i].type -- "button") ( 
allButtons[i].onclick = setActiveStylesheet; 
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} 


function unloadStyle() { 
var expireDate = new Date(); 
expireDate.setYear(expireDate.getFullYear()+1); 
document. cookie = "style=" + getActiveStylesheet() + ";expires=" + expireDate.toGMTString() + ";path=/"; 


} 


function getPreferredStylesheet() { 
var thisLink, relAttribute; 
var linksFound = document. getElementsByTagName("link") ; 


for (var i=0; i<linksFound.length; i++) { 
thisLink = linksFound[i]; 
relAttribute = thisLink.getAttribute ("rel"); 
if (relAttribute.indexOf("style") > -1 && relAttribute.indexOf("alt") == -1 8& 
—thisLink.getAttribute("title")) { 
return thisLink.getAttribute ("title"); 


} 


return 


} 


function getActiveStylesheet() { 
var thisLink; 
var linksFound = document.getElementsByTagName("link"); 


for (var i=0; i<linksFound.length; i++) { 
thisLink = linksFound[i]; 
if (thisLink.getAttribute("rel").indexOf("style") > -1 && thisLink.getAttribute("title") 
—8&lthisLink.disabled) { 
return thisLink.getAttribute("title"); 
} 
} 


return 


"n, 
, 


function setActiveStylesheet(inVal) { 
var thisLink; 
var linksFound = document.getElementsByTagName("link"); 


if (inVal) ( 
if (typeof inVal -- "string") ( 
var title - inVal; 


} 
else { 
var title = inVal.target.id; 
} 
else { 
var title = window.event.srcElement.id; 
} 


for (var i=0; i«linksFound.length; i++) { 
thisLink = linksFound[i]; 
if (thisLink.getAttribute("rel").indexOf("style") > -1 8& thisLink.getAttribute("title")) { 
thisLink.disabled = true; 
if (thisLink.getAttribute("title") == title) { 
thisLink.disabled = false; 


} 


function cookieVal(cookieName) { 
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var thisCookie = document.cookie.split("; "); 
for (var i=0; i«thisCookie.length; i++) { 
if (cookieName == thisCookie[i].split("=")[0]) { 
return thisCookie[i].split("=")[1]; 


} 


return ""; 


7.var allButtons = document.getElementsByTagName(" input"); 


for (var i=0; i<allButtons.length;i++) { 
if (allButtons[i].type == "button") { 
allButtons[i].onclick =setActiveStylesheet ; 


} 


initstyle() 函 数 还 需要 给 按钮 添加 事件 处 理 程序 。 在 这 里 ,在 单 击 按钮 时 ,事件 处 理 程 序 都 调用 
setActiveStylesheet(). 


8. function unloadStyle() { 
var expireDate = new Date(); 
expireDate.setYear(expireDate.getFullYear()+1); 


document.cookie ="style=" +getActiveStylesheet()+";expires=" + expireDate. toGMTString() 
; >+ ";path=/"; 


HARARET, ai cookie 供 以 后 使 用 。cookie 的 终止 日 期 设置 为 一 年 之 后 ， 然 后 调用 
getActiveSstylesheet() 获 得 用 户 当 前 的 设置 ， 并 且 写 出 cookie 供 以 后 使 用 。 


9. function getPreferredStylesheet() { 


var thisLink, relAttribute; 
var linksFound = document.getElementsByTagName("link"); 


如 果 在 加 载 页 面 时 ， 没 有 cookie 能 够 提供 用 户 以 前 选择 的 样式 ， 脚 本 就 需要 判断 首选 的 样式 表 。 
这 个 步骤 和 下 一 个 步骤 中 的 getPreferredstylesheet() 实 现 这 个 功能 。 


10. for (var i=0; i<linksFound.length;i++) { 
thisLink = linksFound[i]; 
relAttribute = thisLink.getAttribute("rel"); 
if (relAttribute.indexOf("st il > -1 && relAttribute.indexOf("alt") == -1 88 
—thisLink.getAttribute("title" 
return thislLink.getAttribute("title"); 



















































































) 
这 个 函数 遍历 每 个 链接 标签 ,检查 它们 是 否 有 rel 属性 ， 这 个 属性 的 值 是 否 包含 style， 这 个 属性 
的 值 是 否 不 包含 alt， 以 及 标签 是 否 有 title 属性 。 如 果 找 到 符合 所 有 这 些 条 件 的 链接 标签 ， 它 链接 的 
就 是 首选 样式 表 ， 所 以 返回 它 的 title 属性 。 

为 了 了 解 代码 中 的 哪个 实际 标签 是 首选 样式 表 ， 看 一 下 HTML 文件 中 的 Link 标签 。 虽 然 HTML 
文件 中 有 3 个 1ink 标 签 ,但 是 只 有 两 个 有 title 属 性 ,在 这 两 个 link 标 签 中 ,一 个 有 rel 属 性 stylesheet， 
男 一 个 的 rel 属性 是 alternate stylesheet。 因 此 ， 首 选 样式 表 是 title 属性 为 default 的 那个 。 

11. for (var i=0; i<linksFound.length;i++) { 

thisLink = linksFound[i]; 


if (thisLink.getAttribute("rel").indexOf("style") > -1 8& thisLink.getAttribute 
("title")8& !thisLink.disabled) { 
return thisLink.getAttribute("title"); 
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} 
} 


正如 前 面 提 到 的 ， 当 用 户 离开 这 个 站 点 时 , 我们 希望 使 用 cookie 存储 他 们 选择 的 样式 表 。 这 样 的 
话 ， 当 他 们 以 后 再 次 访问 这 里 时 ， 就 会 看 到 他 们 喜欢 的 字体 。 尽 管 可 以 在 用 户 每 次 单 击 样式 按钮 时 写 
cookie， 但 更 好 的 方法 是 只 在 用 户 离开 站 点 时 写 cookies TEXXHL, getActiveStylesheet()PA Zt ( 当 页 
面 印 载 时 会 调用 它 ) 循环 遍历 所 有 Link 标签 , 选择 当前 启用 的 样式 表 , 并 且 返 回 这 个 样式 表 的 title. 


12. var thisLink; 
var linksFound = document.getElementsByTagName("link"); 










































































if (inVal) { 
if (typeof inVal == "string") { 
var title = inVal; 


else { 
var title = inVal.target.id; 


else { 
var title = window.event.srcElement.id; 





























正如 前 面 看 到 的 ， 当 用 户 加 载 这 个 页 面 时 ， 调 用 setActiveStylesheet() KAO BIRA —4- 5 A , 

这 个 参数 在 函数 内 称 为 inVval。 但 是 ， 在 单 击 按钮 之 后 也 会 调用 setActiveStylesheet()。 在 这 种 情况 

下 ， 根 据 使 用 的 浏览 器 和 浏览 器 处 理事 件 的 方式 ， 可 能 传递 参数 ， 也 可 能 不 传递 。 在 这 里 进行 检查 ， 

从 而 判断 哪个 函数 调用 了 这 个 函数 以 及 用 户 和 希望 的 操作 。 有 以 下 3 种 可 能 的 情况 。 

口 initstyle() 调 用 了 这 个 函数 ， 并 且 传 递 给 它 一 个 包含 首选 样式 表 的 字符 串 。 在 这 种 情况 下 ， 

inVal 存 在 而 且 它 是 一 个 字符 串 ， 所 以 将 title 设 置 为 inVal。 

O 在 支持 W3C 样 式 事件 的 浏览 器 中 单 击 了 样式 按钮 。 在 这 种 情况 下 ，inval 自 动 设置 为 触发 此 函 
数 的 事件 ， 所 以 inval 存 在 ， 但 它 不 是 字符 串 。 当 发 生 这 种 情况 时 ， 事 件 的 target ( 即 导致 触 
发 事件 的 目标 ) 就 是 被 单 击 的 按钮 ， 这 个 按钮 的 id 存储 着 所 需 的 样式 名 称 。 

O 在 不 支持 W3C 标 准 但 支持 了 正事 件 模型 的 浏览 器 中 单 击 了 样式 按钮 。 如 果 是 这 种 情况 ,那么 inval 
变量 不 存在 ， 所 以 要 从 window.event .srcElement.id 获 得 所 需 的 样式 。 
13. thisLink = linksFound[i]; 
if (thisLink.getAttribute("rel").indexOf("style") > -1 && thisLink.getAttribute("title")) { 
thisLink.disabled = true; 
if (thisLink.getAttribute ("title") == title) { 
thisLink.disabled = false; 
; ) 
setActiveStylesheet() PACH OO PIN PU Sb BER AE. eA SEAN AA style 

的 rel 属性 和 title 属性 。 如 果 这 两 个 条 件 都 成 立 ， 那 么 首先 禁用 这 个 链接 ， 然 后 在 并 且 只 在 title 

属性 设置 为 title 值 的 情况 下 重新 启用 它 。 

所 以 ， 如 果 当 前 使 用 的 样式 表 的 title 属性 为 default， 而 用 户 单 击 了 Lg Serif 按钮 ，JavaScript 就 

知道 应 该 装载 serif 样式 表 。 有 一 个 link 标签 具有 title 属性 serif， 所 以 禁用 所 有 其 他 样式 表 ( 即 这 

里 的 default 样式 表 )， 只 打开 serif 样式 表 。 
































































































































Ajax 简介 








W: 总 是 在 不 断 变化 ，Web 和 JavaScript 的 大 趋势 在 2005 年 年 初 又 有 了 新 变化 。 出 现 了 新 
型 的 Web 应 用 程序 ， 而 且 它 们 很 快 流行 起 来 了 ， 这 些 应 用 程序 包括 来 自 Google 的 Gmail 
和 Google Maps， 以 及 来 自 其 他 公司 的 Flickr 等 程序 。 这 些 新 站 点 的 共同 特色 是 ， 它 们 表现 得 更 像 桌 
面 应 用 程序 ， 具有 快速 的 高 响应 性 的 用 户 界 面 。 在 传统 的 Web 应 用 程序 中 ,， 当 用 户 单 击 链接 时 ， 要 等 
待 服务 器 作出 响应 并 且 刷 新 页 面 ， 而 且 这 个 过 程 会 重复 进行 。 但是， 这 些 新 站 点 具有 更 好 的 响应 性 ， 
能 够 立即 更 新 页 面 ， 这 提供 了 出 色 的 交互 和 更 好 的 用 户 体 验 。 

这 些 新 站 点 的 强大 功能 来 自 于 称 为 Ajax 的 新 技术 ( 其 实 这 种 技术 并 不 是 全 新 的 )。 可 以 使 用 Ajax 
技术 让 自己 的 站 点 具有 更 好 的 响应 性 、 更 吸引 人 , 这 会 使 站 点 的 用 户 在 浏览 过 程 中 更 愉快 。 更 棒 的 是 ， 
你 不 需要 学 习 全 新 的 技术 ， 因 为 Ajax 是 由 你 已 经 掌握 的 几 种 技术 组 合 而 成 的 ( 本 书 前 面 已 经 讨论 过 
这 些 技术 )。 

在 本 章 中 ,你 将 学 习 如 何在 幕后 向 服务 器 请 求 信息 ， 并 且 将 它 转换 为 Ajax 应 用 程序 可 以 使 用 的 
形式 ， 自 动 刷新 来 自 服务 器 的 信息 ， 为 页 面 上 的 对 象 构建 很 酶 的 预览 效果 ， 以 及 构建 一 个 Ajax 应 用 
程序 ， 它 能 够 像 桌 面 应 用 程序 那样 自动 补 全 表单 字段 。 











































































































13.1 Ajax 的 定义 


关于 Ajax 的 有 趣 现象 之 一 是 ， 对 于 Ajax 究 况 是 什么 有 一 些 混淆 ， 甚 至 是 争论 。 我 们 知道 Ajax 
很 重要 而 且 非 常 流行 ， 甚 至 因此 在 本 书 前 几 版 的 书 名 中 增加 了 Ajax 这 个 词 ， 以 此 迎合 Ajax 潮流 。 所 
以 有 必要 澄清 Ajax 是 什么 ， 以 及 在 我 们 使 用 这 个 术语 时 指 的 是 什么 。 

首先 , 谈 谈 Ajax 的 历史 。2005 年 2 月 , Jesse James Garrett ( Adaptive Path 的 创始 人 之 一 , Adaptive 
Path 是 美国 旧金山 的 一 个 Web 界面 和 设计 公司 ) 在 他 们 站 点 上 的 一 篇 文章 中 首次 提出 了 Ajax 这 个 术 
语 。 他 说 Ajax 是 Asynchronous JavaScript and XML ( 异步 JavaScript 和 XML ) 的 缩写 (但 不 是 首 字母 
缩写 )。 在 www.adaptivepath.com/ideas/e000385 上 可 以 读 到 这 篇 文章 ( 见 图 13-1 )。 

根据 Garrett 的 说 法 ，Ajax 本 身 并 不 是 一 种 新 技术 ， 它 是 由 几 种 长 期 存在 的 Web 技术 组 合 而 
成 的 : 
口 使 用 HTML 和 CSS 控制 页 面 结构 和 表示 方式 ; 
口 使 用 DOM 显示 和 操纵 页 面 ; 
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口 使 用 浏览 器 的 XMLHttpRequest 对 象 在 客户 机 和 服务 器 之 间 传 输 数 据 ?; 
口 使 用 XML 作为 在 客户 机 和 服务 器 之 间 传 输 的 数据 的 格式 ”; 
O 最 后 ,使 用 JavaScript 动态 地 显示 所 有 内 容 并 且 提供 交互 功能 。 
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Al 13-1 这 是 启动 Ajax 热潮 的 那 篇 文章 


Ajax 应 用 程序 在 用 户 和 服务 器 之 间 建 立 一 个 中 介 。 Ajax 513€ ( Ajax engine, 也 称 为 网 页 的 JavaScript 
部 分 ) 向 用 户 提供 界面 ( 当然 要 借助 于 HTML 和 CSS )。 如 果 用 户 的 操作 并 不 要 求 向 服务 器 发 出 请 求 ( 例 
如 ， 显 示 已 经 存储 在 本 地 的 数据 )， 那么 Ajax 引擎 会 进行 响应 。 这 使 浏览 器 能 够 对 许多 用 户 操作 立刻 作 
出 反应 , 使 网 页 的 反应 像 桌面 程序 那样 迅速 。 如 果 用 户 操作 需要 服务 器 调用 , Ajax 引擎 就 异步 地 执行 它 ， 
因此 用 户 不 需要 等 待 服务 器 的 响应 。 用 户 可 以 继续 与 应 用 程序 进行 交互 ， 当 请 求 的 数据 到 达 时 ， 引 擎 会 
更 新 页 面 。 这 里 的 重点 是 ， 用 户 的 操作 不 会 由 于 等 待 服务 器 而 暂停 。 

随 着 这 种 技术 的 发 展 ， 即 使 Web 程序 不 包含 所 有 这 些 组 成 部 分 ， 也 可 以 称 为 Ajax 应 用 程序 ， 由 
此 引起 了 混淆 和 争论。 实际 上 ， 其 至 本 书 的 两 位 作者 对 此 也 有 分 歧 。 

Tom 认为 ,，“ 我 喜欢 只 用 DOM、HTML、CSS 和 JavaScript 操作 页 面 ， 我 把 这 种 方式 称 为 Ajax。 
人 们 把 许多 效果 都 称 为 Ajax， 而 且 现代 站 点 的 整个 外 观 由 于 Ajax 而 改变 了 。 从 静态 网 页 到 动态 网 页 
(有 时 候 称 为 Web 2.0) 的 改变 ， 在 外 观 和 感觉 方面 借助 于 Ajax 技术 ， 无 论 在 幕后 是 否 有 服务 器 调用 。 
这 样 宽 泛 地 定义 Ajax 可 能 会 让 纯粹 主义 者 不 满意 ， 但 是 我 认为 是 合适 的 。 















































(D 某 些 场合 也 可 以 使 用 iframe， 或 者 动态 添加 <script> 标 签 。 一 一 编者 注 
© 也 可 以 使 用 JSON 等 格式 。 一 一 编者 注 
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而 另 一 位 作者 Dori 是 正统 的 JavaScript 程序 员 ， 她 认为 :“ 要 想 成 为 Ajax 应 用 程序 ， 就 需要 使 用 
XMLHttpRequest 并 且 在 客户 机 和 服务 器 之 间 传 递 一 些 数 据 。 和 否则， 怎么 算是 新 技术 呢 ? ” 

Dori 正在 编写 Ajax 代码 ， 所 以 对 于 本 章 的 大 多 数 部 分 ,我 们 采用 她 对 Ajax 应 用 程序 是 什么 及 
应 该 做 什么 的 看 法 。 但 是 在 下 一 章 中 ， 我 们 将 演示 如 何在 站 点 上 添加 一 些 Web 2.0 风格 的 特性 ， 这 些 
特性 具有 实际 作用 ， 而 不 只 是 装饰 。 

现在 ,我们 谈 谈 什么 东西 不 属于 Ajax 的 范围 。 因 为 可 以 使 用 Ajax 在 网 页 上 实现 某 些 很 酷 的 视觉 
效果 ， 有 些 人 认为 能 够 使 页 面 看 起 来 更 好 的 任何 东西 都 是 Ajax， 这 导致 他 们 把 Flash 建立 的 界面 也 称 
为 Ajax。 但 是 ， 这 是 一 种 误解 。Ajax 的 作用 并 不 是 把 好 看 的 用 户 界 面 组 件 放 在 站 点 上 ， 使 用 户 界面 
更 酷 ， 而 是 改变 用 户 操作 网 页 的 习惯 。 

现在 ， 我 们 要 指出 Ajax 的 一 些 问题 ， 这 些 问 题 可 能 很 重要 。 例 如 ， 要 想 正确 地 工作 ，Ajax 站 点 
需要 运行 在 现代 浏览 器 中 。 它 还 需要 JavaScript。 所 以 ,对 于 使 用 老式 浏览 器 或 者 关闭 了 JavaScript 功 
能 的 用 户 , 应 该 怎么 做 呢 ? 对 于 残障 用 户 或 者 使 用 功能 有 限 的 手持 设备 ( 比如 手机 或 手写 板 ) 的 用 户 ， 
又 应 该 怎么 做 呢 ? 答案 是 ， 必 须 让 站 点 能 够 平稳 地 退化 ,这 意味 着 使 用 功能 不 足 的 浏览 器 的 用 户 可 以 
使 用 站 点 功能 的 一 部 分 ， 至 少 应 该 显示 有 意义 的 错误 消息 ， 让 他 们 知道 为 什么 不 能 使 用 你 的 站 点 。 

Ajax 应 用 程序 的 男 一 个 潜在 问题 是 ， 它 们 可 能 破坏 浏览 器 后 退 按 钮 的 正常 表现 。 对 于 静态 页 面 ， 
在 单 击 后 退 按钮 时 ， 用 户 会 期 望 浏览 器 转 到 它 加 载 的 前 一 个 页 面 。 但 是 ， 因 为 启用 Ajax 的 页 面 是 动 
态 更 新 的 ， 所 以 这 种 期 望 可 能 会 落空 。 对 于 “后 退 按钮 问题 ”， 有 一 些 解决 方案 ， 在 全 面 投 入 Ajax F 
发 之 前 ， 你 应 该 考虑 这 个 问题 及 其 解决 方案 。 

另外 ，Ajax 不 依赖 于 特定 的 服务 器 端 技术 。 有 许多 公司 试图 借助 于 Ajax 热潮 推销 他 们 的 服务 器 端 解决 
方案 ,这 只 是 他 们 做 生意 的 手段 ,但 是 没有 理由 非 用 他 们 的 产品 不 可 。 只 要 后 端 能 够 提供 JavaScript 可 以 读 
取 的 信息 (最 好 是 XML 形式 )，Ajax 就 能 够 运行 。 那 些 公 司 ( 比如 IBM ) 用 华丽 的 辞藻 宣传 他 们 的 产品 ， 
只 是 为 了 让 产品 搭 上 Ajax 的 顺风 车 ， 让 你 购买 它们 ， 但 是 你 不 必 相 信 这 些 宣传 。 
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我 们 从 基础 开始 讲解 Ajax: 使 用 XMLHttpRequest 对 象 获得 和 显示 来 自 服务 器 的 数据 。 
为 了 完成 这 个 任务 ， 我 们 将 使 用 脚本 13-1 (HTML ) 和 脚本 13-2 (JavaScript )。 可 以 读 取 的 文件 
有 两 个 : 脚本 13-3 所 示 的 纯 文 本 文件 和 脚本 13-4 所 示 的 XML 文件 。 


脚本 13-1 文本 文件 和 XML 文件 请 求 示例 的 HTML 


<!DOCTYPE html» 
<html> 
<head> 
<title>My First Ajax Script</title> 
<script src="script01.js"></script> 
</head> 
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«a id-"makeTextRequest" href-"gAddress.txt"»Request a text file</a><br> 
«a id-"makeXMLRequest" href-"us-states.xml"»Request an XML file«/a» 
</p> 
<div id="updateArea"> </div> 
</body> 
</html> 
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脚本 13-2 这 个 JavaScript 脚本 从 服务 器 获得 文件 


window.onload = initAll; 
var xhr = false; 


function initAll() { 
document. getElementById("makeTextRequest").onclick = getNewFile; 


document. getElementById("makeXMLRequest").onclick = getNewFile; 
} 


function getNewFile() { 
makeRequest (this .href) ; 
return false; 


} 


function makeRequest(url) { 
if (window.XMLHttpRequest) { 
xhr = new XMLHttpRequest() ; 
} 


else { 
if (window.ActiveXObject) { 


try ( 
xhr = new ActiveXObject("Microsoft.XMLHTTP") ; 


} 
catch (e) { } 
} 


if (xhr) { 
xhr.onreadystatechange = showContents; 
xhr.open("GET", url, true); 
xhr.send(null); 


else ( 
document.getElementById("updateArea").innerHTML = "Sorry, but I couldn't create an XMLHttpRequest"; 
} 


} 


function showContents() { 
if (xhr.readyState == 4) { 
if (xhr.status == 200) { 
if (xhr.responseXML && xhr.responseXML.childNodes.length > 0) { 
var outMsg = getText(xhr.responseXML.getElementsByTagName ("choices")[0]); 


} 
else { 
var outMsg = xhr.responseText; 
} 
else { 
var outMsg = "There was a problem with the request " + xhr.status; 


} 
document.getElementById("updateArea").innerHTML = outMsg; 


) 


function getText(inVal) { 
if (inVal.textContent) { 
return inVal.textContent; 


} 
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return inVal.text; 
} 
} 


脚本 13-3 ”这 是 请 求 的 文本 文件 


Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, 
—and dedicated to the proposition that all men are created equal. 

















Now we are engaged in a great civil war,testing whether that nation, or any nation so conceived and so dedicated, 
—can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that 
—field, as a final resting place for those who here gave their lives that that nation might live. It is altogether 
—fitting and proper that we should do this. 


But, in a larger sense, we can not dedicate -- we can not consecrate -- we can not hallow -- this ground. The 
—brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. 
—The world will little note, nor long remember what we say here,but it can never forget what they did here. 
一 It is for us the living, rather,to be dedicated here to the unfinished work which they who fought here have 
—thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us 
—-- that from these honored dead we take increased devotion to that cause for which they gave the last full 
—measure of devotion - that we here highly resolve that these dead shall not have died in vain -- that this 
—nation, under God, shall have a new birth of freedom -- and that government of the people, by the people, 
—for the people,shall not perish from the earth. 


脚本 13-4 这 是 请 求 的 XML 文件 


<?xml version="1.0"?> 

«choices xml: lang="EN"> 
<item><label>Alabama</label><value>AL</value></item> 
<item><label>Alaska</label><value>AK</value></item> 
<item><label>Arizona</label><value>AZ</value></item> 
<item><label>Arkansas</label><value>AR</value></item> 
<item><label>California</label><value>CA</value></item> 
«item»«label»Colorado«/label»«value»CO«/value»«/item» 
<item><label>Connecticut</label><value>CT</value></item> 
<item><label>Delaware</label><value>DE</value></item> 
<item><label>Florida</label><value>FL</value></item> 
<item><label>Georgia</label><value>GA</value></item> 
<item><label>Hawaii</label><value>HI</value></item> 
<item><label>Idaho</label><value>ID</value></item> 
«item»«label»Illinois«/label»«value»IL«/value»«/item» 
<item><label>Indiana</label><value>IN</value></item> 
<item><label>Iowa</label><value>IA</value></item> 
<item><label>Kansas</label><value>KS</value></item> 
<item><label>Kentucky</label><value>KY</value></item> 
<item><label>Louisiana</label><value>LA</value></item> 
<item><label>Maine</label><value>ME</value></item> 
<item><label>Maryland</label><value>MD</value></item> 
<item><label>Massachusetts</label><value>MA</value></item> 
<item><label>Michigan</label><value>MI</value></item> 
<item><label>Minnesota</label><value>MN</value></item> 
<item><label>Mississippi</label><value>MS</value></item> 
«item»«label»Missouri«/label»«value»MO«/value»«/item» 
<item><label>Montana</label><value>MT</value></item> 
<item><label>Nebraska</label><value>NE</value></item> 
<item><label>Nevada</label><value>NV</value></item> 
<item><label>New Hampshire</label><value>NH</value></item> 
<item><label>New Jersey</label><value>NJ</value></item> 
<item><label>New Mexico</label><value>NM</value></item> 
<item><label>New York</label><value>NY</value></item> 
<item><label>North Carolina</label><value>NC</value></item> 
<item><label>North Dakota«/label»«value»ND«/value»«/item» 
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<item><label>Ohio</label><value>OH</value></item> 
<item><label>Oklahoma</label><value>0K</value></item> 
<item><label>Oregon</label><value>OR</value></item> 
<item><label>Pennsylvania</label><value>PA</value></item> 
<item><label>Rhode Island</label><value>RI</value></item> 
<item><label>South Carolina</label><value>SC</value></item> 
<item><label>South Dakota</label><value>SD</value></item> 
«item»«label»Tennessee«/label»«value»TN«/value»«/item» 
«item»«label»Texas«/label»«value»TX«/value»«/item» 
<item><label>Utah</label><value>UT</value></item> 
<item><label>Vermont</label><value>VT</value></item> 
<item><label>Virginia</label><value>VA</value></item> 
<item><label>Washington</label><value>WA</value></item> 
<item><label>West Virginia</label><value>WV</value></item> 
«item»«label»Wisconsin«/label»«value»WI«/value»«/item» 
«item»«label»Wyoming«/label»«value»WY«/value»«/item» 
«/choices» 


> 请 求 服务 器 数据 

1. var xhr = false; 

脚本 13-2 中 的 xhr 变量 是 在 本 章 中 会 经 常 看 到 的 一 个 变量 。 它 是 一 个 XMLHttpRequest 对 象 (或 者 说 
在 初始 化 之 后 将 成 为 XMLHttpRequest 对 象 ) 目前 ， 我 们 只 需 在 任何 丽 数 之 外 创建 它 使 它 成 为 全 局 变量 


2. function initAll() { 


document .getElementById ,makeTextRequest" ).onclick - getNewFile; 
document.getElementById("makeXMLRequest").onclick = getNewFile; 






































当 加 载 页 面 时 , 会 调用 initA11() 函 数 。 在 这 里 , 我 们 设置 两 个 onclick 处 理 程序 ， 当 用 户 单 击 这 
两 个 链接 时 触发 getNewFile() RX 


3. function getNewFile() { 


makeRequest(this.href); 
return false; 


} 
当 用 户 单 击 链接 时 ， 要 执行 某 些 操作 。 在 这 个 示例 中 , 操作 是 调用 makeRequest() 一 一 但 是 这 个 也 
数 需要 知道 已 经 请 求 了 哪个 文件 。 我 们 知道 this.href 中 存储 着 这 一 信息 ， 所 以 可 以 传递 这 个 属性 。 
当 函 数 返回 时 ， 操 作 就 完成 了 ， 所 以 返回 false 值 ， 这 告诉 浏览 器 我 们 不 希望 加 载 新 的 网 页 


4. if (window.XMLHttpRequest) { 
xhr = new XMLHttpRequest(); 






































这 些 代码 在 makeRequest() 中 ， 这 是 有 意思 的 地 方 。 现 代 浏 览 器 支持 一 个 本 机 XMLHttpRequest 对 
象 ， 这 个 对 象 是 window 的 一 个 属性 。 所 以 , 我 们 检查 这 个 属性 是 否 存在 ， 如 果 存 在 ， 就 创建 一 个 新 的 
XMLHttpRequest 对 象 。 


5. if (window.ActiveXObject) { 


try { 
xhr = new ActiveXObject("Microsoft.XMLHTTP") ; 


; bu (e) (3 


zal 














虽然 微软 的 TE (IEA 5.5 和 版 本 6 ) 支持 XMLHttpRequest， 但 是 没有 这 个 对 象 的 本 机 版 本 。 在 这 
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种 情况 下 ， 必 须 检查 浏览 器 是 否 支持 ActiveX。 如 果 支 持 的 话 ， 就 检查 是 否 能 够 根据 ActiveX 创建 
XMLHttpRequest 对 象 ( 使 用 try/catch 异常 处 理 结构 )。 如 果 可 以 ， 就 这 么 做 。 
6. if (xhr) ( 
xhr.onreadystatechange - showContents; 


xhr.open("GET", url, true); 
xhr.send(null); 











无 论 采 用 哪 种 方式 ， 我 们 都 应 该 会 获得 一 个 新 的 xhr 对 象 。 如 果 获 得 了 xhr 对 象 ， 就 需要 用 它 做 
3 件 事 。 我 们 总 是 用 xhr 做 下 面 3 件 事 。 
O 设置 xhr 的 onreadystatechange 事 件 处 理 程序 。 每 当 xhr.readyState 属 性 值 发 生变 化 时 ， 就 会 触 
发 这 个 处 理 程序 。 
口 调用 open() 并 且 传 递 3 个 参数 : 一 个 HTTP 请 求 方法 (例如 "GET"、"P0ST" 或 "HEAD" )、 服 务 器 上 
一 个 文件 的 URL 和 一 个 布尔 值 ， 这 个 布尔 值 告诉 服务 器 请 求 是 否 异步 (也 就 是 说 , 我 们 是 否 会 



































等 待 请 求 完 成 )。 
口 最 后 ， 我 们 用 send() 发 送 刚才 创建 的 请 求 。 如 果 要 请 求 PoST， 就 传递 这 里 给 出 的 参数 。 
7. else { 


document.getElementById("updateArea").innerHTML = "Sorry, but I couldn't create an 
—XMLHttpRequest" ; 



































如 果 执 行 到 这 里 ， 那 么 就 说 明 由 于 某 种 原因 无 法 创建 XMLHttpRequest, ， 所 以 除了 输出 错误 消息 之 
外 ， 没 什么 事 儿 可 做 了 。 
8. if (xhr.readyState == 4) { 
if (xhr.status == 200) { 
PREZ showContents() Piaf. readyState 属性 可 能 是 几 个 值 之 一 ( 见 表 13-1), mA RR 
务 器 改变 它 的 值 时 ， 就 会 触发 showContents() 函 数 。 但 是 ， 在 请 求 完 成 之 前 ， 我 们 实际 上 不 希望 执行 
任何 操作 ( 至 少 在 这 里 不 做 什么 )， 所 以 首先 检查 readyState 是 否 等 于 4。 如果 是 ， 就 可 以 继续 执行 ， 
检查 请 求 返 回 的 是 什么 。 




















表 13-1 readyState 属性 值 















































值 意 x 

0 未 初始 化 。 对 象 不 包含 数据 

1 正在 加 载 。 对 象 当前 正在 加 载 它 的 数据 

2 已 经 加 载 。 对 象 已 经 完成 了 数据 加 载 

3 交互 式 的 。 即 使 对 象 还 未 完全 加 载 完 ， 用 户 也 可 能 与 对 象 进行 交互 
4 完成 。 对 象 已 经 完成 了 初始 化 














首先 要 检查 的 是 请 求 的 状态 ， 即 服务 器 返回 的 状态 码 〈 对 于 请 求 的 每 个 文件 ， 服 务 器 都 会 在 幕后 
返回 这 些 编 码 ， 但 是 浏览 器 只 在 出 现 错误 时 显示 它们 )。 例 如 ， 状 态 码 200 意味 着 一 切 正常 ， 这 里 的 
状态 就 是 服务 器 调用 返回 的 状态 ;如 果 请 求 的 文件 不 存在 ， 就 会 从 Web 服务 器 得 到 404 错误 。 
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9. if (xhr.responseXML && xhr.responseXML.childNodes.length > 0) { 
var outMsg = getText(xhr.responseXML.getElementsByTagName("choices")[0]); 


else { 
var outMsg = xhr.responseText; 

















如 果 执 行 到 这 里 ， 就 意味 着 一 切 正常 ， 我 们 要 查看 服务 器 实际 上 提供 了 什么 。 我 们 可 以 读 取 的 文 
件 有 两 种 类 型 ， 所 以 需要 检查 返回 的 数据 类 型 。 如 果 数 据 是 XML responseXML 属性 就 包含 数据 。 然 
Ij, responseXML 属性 也 包含 不 是 XML 的 数据 。 如 果 mm ao 
responseXML.ChildNodes. length 大 于 零 ( 即 它 包 含 多 个 9 cx SS DTE] 
虚拟 对 象 ) ， 那 么 我 们 就 知道 已 经 得 到 了 一 个 具有 适当 | 
各 式 的 DOM 对 象 ， 可 以 使 用 以 前 见 过 的 命令 〈 比如 
etElementsByTagName() ) 来 遍历 它 的 节点 。 但 是 在 这 
B ,我们 只 想 试 试 那 种 方法 ,将 其 结果 传递 给 getText() M m 
函数 。 返 回 的 值 保存 在 outMsg 中 。 ee 
如 果 得 到 的 数据 不 是 有 效 的 XML， 那 么 它 就 是 文 | he erica nes "oem eae 


本 文件 。 在 这 种 情况 下 ， 我 们 将 xhr 的 responseText — |... 
属性 放 到 outMsg o 
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poor power to add or detract. The world 
t it can never forget what they did here. It is for us the 
rk which they who fought here have thus far so nobly 




















@ My First Ajax Script - Mozilla Firefox EI] 
Ele Edit View History Bookmarks Tools Help 7 
10. else { QU € X e Certatim P| E 
var outMsg - "There was a problem with the LL Myr eit E - 
request " + xhr.status; 


Request an XML file 


AlabamaAL AlaskaAK ArizonaAZ ArkansasAR CaliforniaCA ColoradoCO ConnecticutCT DelawareDE 
FloridaFL GeorgiaGA HawaiiHI IdahoID IllinoisIL IndianaIN IowalA KansasKS KentuckyK Y LouisianaL A. 


如 RIR [n] TY 200 之 Ab 的 其 他 状态 人 码 就 是 出 下 问 MaineME MarylandMD MassachusettsMA MichiganMI MinnesotaMN MississippiMS MissouriMO 


MontanaMT NebraskaNE NevadaNV New HampshireNH New JerseyNJ New MexicoNM New YorkNY 
North CarolinaNC North DakotaND OhioOH OklahomaOK OregonOR PennsylvaniaPA Rhode IslandRI 


题 ， 所 以 设置 outMsg 来 指出 错误 ， 并 且 附 加 上 状态 错 。 | SEGRE Stee terium tdi ema a cay 
误 ， 让 用 户 能 够 判断 出 了 什么 问题 。 

11. document.getElementById("updateArea").inne- 
—rHTML = outMsg; 

最 后 ， 将 outMsg 输出 到 屏幕 ， 见 图 13-2. pe 

PRA MM a 图 13-2“ 单 击 链接 就 会 获得 葛 底 斯 堡 演讲 的 

return inVal.textContent; 文本 文件 (上 图 ) 或 者 美国 各 州 名 

} 称 和 缩写 的 XML 文件 (下 图 ) 








Done 









































return inVal.text; 


这 就 是 getText(), 其 作用 是 检查 所 有 传人 的 参数 是 否 包 含 textContent 属性 。 如 果 包 含 ， 就 返回 
textContent, ， 否 则 返回 其 text 属性 。 














v 提示 
口 由 于 Ajax 的 工作 方式 ， 在 进行 开发 和 测试 时 ， 要 读 取 的 文件 必须 驻 留 在 服务 器 上 ， 它 们 不 能 
是 本 地 文件 。 





O 在 步骤 5 中 我 们 说 过 , IE 5.5 &I TE 6 使 用 ActiveX 控件 创建 XMLHttpRequest 对 象 。 好 在 IE 7 
有 了 本 机 对 象 ， 所 以 不 再 需要 ActiveX 控件 了 。 但 是 ， 这 意味 着 必须 先 检查 本 机 对 象 是 否 存 
在 一 一 如 果 先 检查 window.ActiveXObject, 那么 正 7 及 以 上 版 本 也 会 通过 这 个 测试 ， 所 以 会 进 
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入 错误 的 代码 路 径 。 许 多 在 TE 7 发 布 之 前 编写 的 Ajax 代码 都 有 这 个 问题 。 
Q 如 果 需 要 进一步 检查 实际 获得 的 微软 ActiveX 对 象 的 版 本 ， 那 么 可 以 使 用 下 面 的 代码 片段 : 


if (window.ActiveXObject) { 
try { 
xhr = new ActiveXObject ("Msxm12.XMLHTTP") ; 











j 
catch (e) { 
try ( 
xhr = new ActiveXObject ("Microsoft.XMLHTTP"); 


} 
catch (e) { } 
j 





这 个 方法 首先 尝试 使 用 XMLHttpRequest 对 象 的 IE 6 版 本 〈Msxm12.XMLHTTP )， 如 果 找 不 到 
这 个 对 象 版 本 ， 就 尝试 老 版 本 。 但 是 ，Microsoft.XMLHTTP 应 该 会 提供 PC 上 可 用 的 最 新 版 本 ， 
所 以 我 们 只 在 本 章 中 使 用 这 样 的 代码 一 一 因为 老 代 码 最 终 会 废弃 的 。 
O Ajax 调用 的 缺点 之 一 是 它们 可 能 被 缓存 。 也 就 是 说 , 应 用 程序 看 似 与 服务 器 进行 通信 并 且 获 得 
新 数据 ， 但 是 它 实际 上 只 是 查看 以 前 读 取 的 数据 。 如 果 是 这 种 情况 ， 设 置 请 求 首部 会 有 帮助 。 
添加 以 下 请 求 首部 可 以 迫使 服务 器 提供 最 新 数据 : 
xhr.setRequestHeader("If-Modified-Since", "Wed, 15 Jan 1995 01:00:00 GMT"); 
xhr.setRequestHeader("Cache-Control","no-cache"); 
xhr.setRequestHeader("Cache-Control","must-revalidate"); 
xhr.setRequestHeader("Cache-Control","no-store"); 


xhr.setRequestHeader("Pragma", "no-cache") ; 
xhr.setRequestHeader("Expires","0"); 


O 通过 覆盖 MIME 类 型 ， 可 以 迫使 调用 返回 XML 数据 ; 
xhr.overrideMimeType("text/xml"); 


但 是 ， 对 于 某 些 浏览 器 和 配置 ， 这 可 能 会 造成 问题 ， 所 以 要 谨慎 使 用 。 
13.3 解析 服务 器 数据 


既然 已 经 从 服务 器 获得 了 数据 ， 我 们 就 需要 找到 所 需 的 信息 ， 并 且 确 保 它 采用 的 格式 是 Ajax 应 
用 程序 可 以 使 用 的 。 为 此 ,首先 需要 检查 信息 。 因 为 数据 是 结构 良好 的 XML 文档 ,脚本 可 以 在 XML 
文档 树 中 移动 ， 寻 找 并 且 提 取 所 需 的 数据 ， 然 后 将 数据 存储 在 变量 中 。 如 果 需 要 ， 脚 本 还 可 以 对 数据 
进行 重新 格式 化 以 备 后 期 使 用 。 
HTML 和 CSS 很 简单 ， 分 别 见 脚本 13-5 和 脚本 13-6， 所 以 只 需 看 看 JavaScript 文件 ( 脚本 13-7 ) 
中 的 代码 .对 于 这 个 示例 ,XML 文件 是 关于 存储 在 Flickr 上 的 照片 的 数据 -XML 的 一 部 分 见 脚本 13-8。 


脚本 13-5 ”只 需 添 加 一 些 JavaScript 代码 ， 这 个 简单 的 HTML 页 面 就 会 更 引 人 注 目 


<!DOCTYPE html» 
<html> 
<head> 
<title>My Second Ajax Script</title> 
<link rel-"stylesheet"href-"scriptO2.css"» 
<script src="script02.js"></script> 
</head> 
<body> 
<div id="pictureBar"> </div> 
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«/body» 
«/html» 


脚本 13-6 ”只 需 少 量 CSS 代码 ， 就 足以 改善 页 面 的 外 观 


img { 
border-width: 0; 
margin: 5px; 


脚本 13-7 这 个 脚本 中 增加 的 JavaScript 代码 可 以 对 前 面 请 求 的 数据 进行 解析 


window.onload = initAll; 
var xhr = false; 


function initAll() { 
if (window.XMLHttpRequest) { 
xhr = new XMLHttpRequest(); 


else { 
if (window.ActiveXObject) { 
try ( 
xhr = new ActiveXObject ("Microsoft.XMLHTTP"); 


} 
catch (e) { } 
} 


if (xhr) { 
xhr.onreadystatechange = showPictures; 
xhr.open("GET", "flickrfeed.xml", true); 
xhr.send(null); 


else { 
alert("Sorry, but I couldn't create an XMLHttpRequest"); 
) 
) 


function showPictures() ( 
var tempDiv - document.createElement("div"); 
var tempText = document.createElement("div"); 


if (xhr.readyState -- 4) ( 
if (xhr.status -- 200) ( 
var allImages = xhr.responseXML.getElementsByTagName("content") ; 


for (var i-0; i<xallImages.length; i++) { 
tempText.innerHTML = getPixVal(allImages[i]); 
tempDiv = tempText.getElementsByTagName("p") ; 


var theText = tempDiv[1].innerHTML; 
theText = theText.replace(/240/g,"75"); 
theText = theText. a aa ae 

theText = theText. replace(/ m/g," 

document. getElementById(" Wie sr y innerHTML += theText; 


) 


else { 
alert("There was a problem with the request 
} 


} 


function getPixVal(inVal) { 


+ xhr.status); 
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return (inVal.textContent) ? inVal.textContent : inVal.text; 
} 
} 


脚本 13-8 这 是 Flickr 提供 的 XML 文件 的 简化 版 本 ， 原 来 的 文件 大 约 有 500 £1 


<?xml version="1.0" encoding="utf-8" standalone="yes"?> 

«feed xmlns="http://www.w3.org/2005/Atom" 
xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:flickr="urn: flickr: "xmlns:media="http://search. 
—yahoo.com/mrss/"> 





<title>Content from Paradise Ridge Sculpture Grove</title> 

<link rel-"self" href="http://api. flickr.com/services/feeds/photoset .gne?set=72157600976524175&amp ; 
—+nsid=23922109@NOO&amp; lang=en-us" /> 

<link rel-"alternate" type-"text/html" href="http://ww. flickr.com/photos/dorismith/sets/72157600976524175"/> 
<id>tag: flickr.com, 2005:http://www. flickr. com/photos/23922109@NO0/sets/72157600976524175</id> 
«icon»http://farm2.static.flickr.com/1335/882568164 72eee9b41f s.jpg«/icon» 

«subtitle»The &lt;a href-&quot;http://www.paradiseridgewinery.com/&quot;&gt;Paradise Ridge 
—Winery&lt;/a&gt; not only has great wines, but they also have a sculpture garden. We visited on 22 July 
—2007.«/subtitle» 

«updated»2007-07-24T05:19:08Z«/updated» 

«generator uri="http://www. flickr.com/">Flickr</generator> 


<entry> 
«title»IMG 0045.JPG«/title» 
«link rel-"alternate" type-"text/html" href-"http://www.flickr.com/photos/dorismith/882590644/in/ 
—set-72157600976524175/"/> 
<id>tag: flickr.com, 2005: /photo/882590644/in/set-72157600976524175</id> 
«published»2007-07-24T05:19:08Z«/published» 
«updated»2007-07-24T05:19:08Z«/updated» 
«dc:date.Taken»2007-07-22T13:42:49-08:00«/dc:date.Taken» 
«content type="html">&lt; p&gt;&lt;a href-&quot;http://www.flickr.com/people/dorismith/8quot;8gt; 
一 Dori Smith&lt;/a&gt; posted a photo:8lt;/p8gt;&lt;p&gt;8lt;a href=&quot ;http://www. flickr.com/ 
—photos/dorismith/882590644/8quot; title-&quot;IMG 0045.JPG8quot;8gt;&lt;img src=&quot;http:// 
—farm2.static.flickr.com/1063/882590644 5a4a0d89f3 m.jpg8&quot; width=&quot ; 240&quot ; height= 
—&quot ;180&quot; alt=&quot; IMG 0045. IPG&quot; /&gt; &lt; /a&gt ; &lt; /p&gt; 


</content> 
<author> 
«name»Dori Smith</name> 
«uri»http://www.flickr.com/people/dorismith/«/uri» 
«/author» 
«link rel-"enclosure" type-"image/jpeg" href-"http://farm2.static.flickr.com/1063/882590644 
—5a4a0d89f3 m.jpg" /> 


«category term-"winery" scheme-"http://www.flickr.com/photos/tags/" /» 
«category term-"sonomacounty" scheme-"http://www.flickr.com/photos/tags/" /» 
«category term-"sculptures" scheme-"http://www.flickr.com/photos/tags/" /» 
«category term-"dorismith" scheme-"http://www.flickr.com/photos/tags/" /» 
«category term-"paradiseridge" scheme-"http://www.flickr.com/photos/tags/" /» 
«category term-"paradiseridgesculptures" scheme-"http://www.flickr.com/photos/tags/" /» 
«/entry» 
«entry» 
«title»IMG 0032.JPG«/title» 
«link rel-"alternate" type-"text/html" href-"http://www.flickr.com/photos/dorismith/882568164/in/ 
—set-72157600976524175/"/> 
<id>tag: flickr.com, 2005: /photo/882568164/in/set-72157600976524175</id> 
«published»2007-07-24T05:15:14Z«/published» 
«updated»2007-07-24T05:15:14Z«/updated» 
«dc:date.Taken»2007-07-22T13:35:09-08:00«/dc:date.Taken» 
«content type="html">&lt; p&gt;&lt;a href-&quot;http://www.flickr.com/people/dorismith/8quot;8gt; 
—Dori Smith&lt;/a&gt; posted a photo:&lt;/p&gt; alt; p&gt;&lt;a href-&quot;http://www.flickr.com/ 
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—photos/dorismith/882568164/8quot; title=&quot;IMG 0032.JPG&quot;&gt;&lt;img src=&quot;http:// 
farm2.static.flickr.com/1335/882568164_72eee9b41f_m.jpg&quot; width=&quot;240&quot; height= 
—8&quot; 180&quot; alt-&quot;IMG 0032.JPG&quot;/8gt;&1t;/a8gt;&lt;/p&gt; 


</content> 
<author> 
<name>Dori Smith</name> 
«uri»http://www. flickr.com/people/dorismith/</uri> 
</author> 
<link rel="enclosure"type="image/jpeg"href="http://farm2.static. flickr. com/1335/882568164 
—>_72eee9b41f_m. jpg" /> 


«category term-"winery" scheme-"http://www.flickr.com/photos/tags/" /> 

«category term-"sonomacounty" scheme-"http://www.flickr.com/photos/tags/" /» 

«category term-"sculptures" scheme-"http://www.flickr.com/photos/tags/" /» 

«category term-"dorismith" scheme-"http://www.flickr.com/photos/tags/" /> 

«category term-"paradiseridge" scheme-"http://www.flickr.com/photos/tags/" /» 

«category term-"paradiseridgesculptures" scheme-"http://www.flickr.com/photos/tags/" /» 
«/entry» 


«/feed» 


F^ 解析 来 自 服务 器 的 信息 








1. xhr.onreadystatechange = showPictures; 
xhr.open("GET", "flickrfeed.xml", true) ; 


每 当 readyState 发 生变 化 时 ,我 们 希望 调用 showPictures() 函 数 。 我 们 要 从 服务 器 读 取 的 文件 名 
是 flickrfeed.xml。 这 些 都 在 这 里 进行 设置 。 

2. var tempDiv = document.createElement("div"); 
var tempText = document.createElement("div"); 


showPictures() 中 的 这 些 代码 执行 实际 工作 。 我 们 首先 创建 变量 来 存储 两 个 元 素 : tempDiv 和 
tempText ( 都 是 临时 的 占 位 符 div )。 

3. var allImages = xhr.responseXML .getElementsByTagName("content"); 

服务 器 发 送 回 的 响应 包含 XML， 所 以 可 以 获取 响应 并 寻找 每 个 内 容 节 点 。 如 果 看 一 下 脚本 13-8 
中 的 XML, 会 看 到 其 中 有 许多 我 们 根本 不 感 兴 趣 的 东西 。 实 际 上 ， 我 们 需要 的 只 是 <a> 标 签 中 的 内 容 
(其实 只 需要 其 中 的 一 半 )。 所 以 ， 我 们 首先 缩小 要 处 理 的 内 容 范围 。 

4. for (var i=0; i<allImages.length; i++) { 

现在 ， 需 要 对 找到 的 所 有 节点 执行 循环 ， 找 出 我 们 需要 的 实际 数据 。 


5. tempText.innerHTML = getPixVal(alllmages[i]); 
tempDiv = tempText.getElementsByTagName("p"); 


因为 我 们 已 经 得 到 了 XML 数据 ， 所 以 可 以 使 用 它 的 textContent 属性 (也 可 能 是 text 属 1 
得 节点 的 文本 。 我 们 希望 找到 其 中 的 所 有 段落 一 一 应 该 有 两 个 段落 。 
6. var theText = tempDiv[1].innerHTML; 
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theText = theText.replace(/240/g,"75"); 
theText = theText.replace(/180/g,"75"); 
theText = theText.replace(/ m/g," s"); 





正如 前 面 提 到 的 ,我 们 只 需要 一 半 <a> 节 点 ， 所 以 要 去 掉 不 需要 的 那些 。 在 一 个 包含 20 张 照片 信 
息 的 文件 中 ,就 有 20 个 <content> 节 点 ,每 个 节点 包含 两 个 段落 。 每 个 ccontent> 节 点 包含 摄影 师 的 姓 
名 (链接 到 他 们 的 Flickr 页 面 ), 然后 是 一 个 图 像 ， 它 链接 到 Flickr 保存 的 版 本 。 我 们 只 需要 后 者 ， 所 
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以 只 获取 tempDiv 数组 中 第 二 个 元 素 的 innerHTML, 也 就 是 段落 中 的 <a> ( 以 及 其 中 包含 的 cimg> 标 签 )。 
接 下 来 ,使 用 正则 表达 式 修改 结果 。Flickr 发 送 给 我 们 的 是 中 等 大 小 图 像 的 标签 ， 但 是 我 们 只 需 
要 缩 略 版 本 。 因 为 我 们 的 图 像 要 么 是 240 x 180 (水 平 的 )， 要 么 是 180x240 (垂直 的 )， 缩 略图 总 是 
75 x75， 所 以 只 需 把 文本 中 的 所 有 240 或 180 改 为 73。 最 后 ， 修 改 图 像 名 本 身 。Flickr 中 等 大 小 图 像 
的 名 称 以 mm 结尾， 小 图 像 以 _s 结尾 ， 所 以 要 把 _ m 替换 为 s。 
7. document.getElementById("pictureBar").innerHTML += theText; 
在 这 个 循环 中 ， 把 修改 后 的 节点 附加 到 HTML 页 面 的 pictureBar 中 。 最 终结 果 见 图 13-3， 这 个 
页 面 上 的 每 个 缩 略图 都 链接 到 全 尺寸 版 本 。 
8. return (inVal.textContent) ?inVal.textContent : inVal.text; 
这 是 getpixval() 函 数 的 全 部 内 容 ， 基 本 上 与 — 
eoo My Second Ajax Script 
脚本 13-2 的 getText()—FE, KPIREN SA @ http:/ www javascriptworld.com/js7 Q E Q- Google Wi 
种 语法 。 | | 
V 提示 
OQ 尽管 不 能 读 取 存 储 在 另 一 个 服务 器 上 的 数 
据 文件 (关于 这 种 情况 的 原因 ， 请 参见 后 面 
的 “获得 数据 ”), 但 是 可 以 让 HTML 文件 从 
另 一 个 服务 器 加 载 信息 。 网 页 无 论 在 什么 地 
方 ， 都 能 够 显示 来 自 Flickr 服务 器 的 图 像 。 
口 Web 2.0 网 站 的 优点 之 一 是 ， 它 们 理解 人 们 
希望 访问 数据 一 一 不 只 是 他 们 自己 的 数据 ， 
而 且 包 括 别 人 的 数据 ( 如 果 数 据 的 主人 同意 
将 数据 公开 的 话 )。 例 如 ， 可 以 在 Flickr 上 
搜索 所 有 包含 夏威夷 和 日 落 的 照片 ,然后 以 
XML 文件 的 形式 返回 结果 。 将 此 功能 与 这 











































































































个 脚本 或 下 一 个 脚本 结合 在 一 起 , 就 可 以 在 
页 面 上 显示 最 新 的 照片 。 图 13-3 ”这 些 缩 略图 是 从 Flickr 读 取 的 
获得 数据 





当 人 们 第 一 次 听 说 Ajax 时 , 最 想 做 的 事情 之 一 是 , 用 JavaScript 读 取 各 种 XML 文件 ( 包括 RSS 
和 Atom 提要 )， 重 新 组 合 它 们 ， 然 后 将 结果 放 在 自己 的 网 页 上 。 

2 消息 是 : 这 种 方式 有 一 点 儿 限 制 一 一 脚本 只 能 读 取 它 所 在 的 服务 器 上 的 文件 。 如 果 你 稍微 考虑 

,就 会 明白 这 是 为 什么 : 如 果 脚 本 能 够 读 取 任 何 文件 , 那么 就 会 出 现 各 种 安全 隐患 和 假冒 的 站 点 。 

好 消息 是 : 可 以 让 服务 器 上 的 程序 定期 运行 ， 获 得 一 个 XML 文件 ， 然 后 将 它 存储 在 本 地 。 在 此 之 
后 ，Ajax 应 用 程序 就 可 以 读 取 它 。 在 这 个 示例 和 下 一 个 示例 中 ， 假 设 已 经 运行 了 某 个 程序 ， 它 定期 获 
取 所 选择 的 Flickr 数据 文件 ， 并 且 将 它 保 存在 你 自己 的 服务 器 上 。 但 是 ， 具 体 做 法 超出 了 本 书 的 范围 。 

更 好 的 消息 是 , 在 某 些 情况 下 可 以 使 用 目标 服务 器 本 身 驻 留 的 脚本 ,脚本 可 以 读 取 自己 服务 器 
上 的 文件 ， 然 后 把 结果 返回 给 用 户 。 我 们 稍 后 就 会 看 到 一 个 示例 。 
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13.4 刷新 服务 器 数据 


我 们 的 Ajax 应 用 程序 已 经 从 服务 器 获得 了 信息 ， 然 后 解析 数据 并 且 对 数据 进行 操作 。 现 在 ， 我 们 要 演 
示 如 何 让 应 用 程序 从 服务 器 获得 数据 的 新 版 本 , 然后 自动 地 刷新 页 面 。 脚 本 13-9 包含 必要 的 JavaScript 代码 。 


脚本 13-9 使 用 这 个 脚本 自动 地 刷新 服务 器 信息 


window.onload = initAll; 
var xhr = false; 





















































function initAll() { 
if (window.XMLHttpRequest) { 
xhr = new XMLHttpRequest(); 


else { 
if (window.ActiveXObject) { 
try { 
xhr = new ActivexObject("Microsoft.XMLHTTP") ; 


j 
catch (e) ( ) 


) 


if (xhr) ( 
getPix(); 


else { 
alert("Sorry, but I couldn't create an XMLHttpRequest"); 


) 


function getPix() ( 
xhr.open("GET", "flickrfeed.xml", true); 
xhr.onreadystatechange - showPictures; 
xhr.send(null); 
setTimeout(getPix, 5 * 1000); 


) 


function showPictures() ( 
var tempText - document.createElement("div"); 
if (xhr.readyState -- 4) ( 
if (xhr.status -- 200) ( 
var allImages = xhr.responseXML.getElementsByTagName(" content"); 
var randomImg = Math.floor(Math.random() * allImages.length); 


tempText.innerHTML = getPixVal(allImages[randomImg]) ; 
var thisImg = tempText.getElementsByTagName("p")[1]; 
document. getElementById("pictureBar").innerHTML = thisImg.innerHTML; 


else { 
alert("There was a problem with the request 


+ xhr.status); 


} 


function getPixVal(inVal) { 
return (inVal.textContent) ? inVal.textContent : inVal.text; 


} 


> 刷新 服务 器 信息 








1. function getPix() { 
xhr.open("GET", "flickrfeed.xml", true); 
xhr.onreadystatechange - showPictures; 





xhr.send(null); 


setTimeout(getPix,5 * 1000); 





前 面 的 脚本 在 initAl1() 中 进行 xhr 调用 ， 而 这 个 脚本 将 它 放 在 单独 的 函数 getPix() 中 。 而 且 ， 





增加 了 setTimeout() 调 用 。 在 脚本 获得 一 个 随机 图 像 之 后 5 秒 ， 它 会 再 次 获取 图 像 。 
2. vax randomImg = Math.floor (Math.random() * allImages. length); 


—tempText.innerHTML = getPixVal (allImages[randomImg]); 
var thisImg = tempText. getElementsByTagName("p")[1]; 


与 前 一 个 示例 中 进行 的 循环 不 同 ， 这 次 我 们 只 想 一 个 随机 图 
像 。 首 先 , 像 4.10 节 中 那样 , 使 用 Math.random() 和 Math.floor() 
计算 出 一 个 零 到 图 像 数 量 减 1 的 随机 数 。 之 后 ， 使 用 这 个 随机 数 
作为 allLinks 数组 的 索引 ， 获 得 getPixVal() 函 数 的 精确 节点 。 








3. document.getElementById("pictureBar").innerHTML = thisImg. 


—innerHIML; 


现在 我 们 获得 一 个 图 像 ， 然 后 将 这 个 图 像 放 进 网 页 ( 见 图 
13-4) 。 

V 提示 

O 你 可 能 会 觉得 奇怪 : 这 个 脚本 为 什么 每 次 都 读 取 同 一 个 
XML 文件 。 如 果 这 个 文件 没有 改动 , 那么 为 什么 不 直接 使 
用 第 一 次 获得 的 变量 中 的 数据 ?如 果 你 还 记得 13.3 节 补 
充 内 容 “ 获 得 数据 ”中 提 到 的 技术 ， 就 会 意识 到 XML x 
件 随时 都 可 能 发 生 改 动 。 假 设 你 的 服务 器 端 程序 每 几 分 钟 
创建 一 次 XML 文件 的 新 版 本 ， 为 什么 用 户 需要 等 待 才 能 
看 到 最 新 的 照片 呢 ? 这 样 ， 用 户 就 能 及 时 地 看 到 它们 。 

O 如 果 采 用 刚才 提 到 的 方式 ， 就 很 可 能 遇 到 本 章 前 面 提 到 的 
Ajax 缺点 : 缓存 。 不 同 的 浏览 器 ( 以 及 不 同 的 版 本 和 平台 ) 
都 有 自己 独特 的 缓存 机 制 ， 通 过 修改 前 面 讨 论 的 请 求 首 
部 ， 可 以 解决 大 多 数 浏览 右 ( 不同 版 本 、 不 同 平台 ) 的 组 
存 机 制 ,许多 人 推荐 的 另 一 个 解决 方案 是 将 GET PU POST. 
我 们 发 现 另 一 个 方法 也 是 有 效 的 : 像 步 又 1 中 那样 ， 对 换 
脚本 13-9 中 open() 和 onreadystatechange 的 次 序 。 
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eoo My Third Ajax Script 
© hup: / /www.javascriptworld.com/js7 © £Q- I» 




















eoo My Third Ajax Script 
@ http: / /www.javascriptworld.com/js7 © = Q- » 




















eoo My Third Ajax Script 
@ http: / /www.javascriptworld.com/js7 © = Q~ » 
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Ed 13-4 ”这 个 脚本 一 幅 接 一 幅 地 


显示 图 像 


正如 前 面 补充 内 容 “ 获 得 数据 ”中 提 到 的 ，Ajax 可 以 限制 读 取 数据 的 位 置 。 毕 竞 ， 你 不 希望 世界 
上 的 每 个 人 都 能 够 读 取 你 的 任何 文件 ,不 是 吗 ? 但 是 有 时 候 ,， 公司 希望 别人 读 取 文件 ， 这 样 就 能 够 在 
他 们 自己 的 网 站 上 创建 自己 的 内 容 。 例 如 ，Flickr ( 见 前 面 的 示例 ) 允许 你 的 服务 器 获得 他 们 的 XML 

















文件 ， 然 后 你 可 以 用 这 些 文件 做 任何 事情 。 
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但 是 有 时 候 , 你 无 法 获得 对 服务 器 的 访问 权 ， 所 以 Flickr 以 另 一 种 格式 提供 这 些 文件 : ISON. 
示例 的 关键 之 处 在 HTML 文件 中 ( 见 脚本 13-10 ) ，JavaScript 文件 ( 见 脚本 13-11 ) te 








脚本 13-10 ”这 个 示例 的 关键 之 处 是 在 HTML 页 面 中 添加 远程 脚本 标签 


<!DOCTYPE html» 

<html> 

<head> 
<title>Using JSON Data</title> 
<link rel="stylesheet"href="script02.css"> 
«script src="script04.js"></script> 
«script src-"http://api.flickr.com/services/feeds/photoset.gne?nsid-239221098N008set- 
—72157600976524175&format-json"»«/script» 

«/head» 

«body» 
«div id-"pictureBar"» «/div» 

</body> 

</html> 


脚本 13-11 JavaScript 文件 缩短 了 ， 因 为 大 多 数 工作 由 远程 服务 器 完成 


window.onload = initAll; 

var imgDiv = ""; 

function initAll() { 
document.getElementById("pictureBar").innerHTML = imgDiv; 

} 


function jsonFlickrFeed(flickrData) { 
for (var i=0; i<flickrData.items.length;i++) { 
imgDiv += "<img src='"; 
imgDiv += flickrData.items[i].media.m.replace(/_m/g,"_s"); 
imgDiv += "' alt='" + flickrData.items[i].title + "'>"; 
} 
} 


> 读 取 和 解析 服务 器 数据 


1. «script src="http://api. flickr.com/services/feeds/photoset.gne?nsid=23922109@NO0&set= 





























—72157600976524175&format=json" ></script> (B Wing BON Das emet pore provide by Dal Eas 
我 们 在 前 面 说 过 ， 脚 本 只 能 读 取 它 所 在 的 服务 器 上 ER = : = 
的 文件 。 这 个 规则 仍然 有 效 ， 但 是 这 并 不 意味 着 不 能 调 WE D] US 
用 另 一 个 服务 器 上 的 脚本 文件 。 在 这 个 示例 中 ， 这 个 脚 FN d 
本 放 在 api.flickr.com IRAE, 因此 它 可 以 读 取 这 个 服 


务 器 上 的 数据 。 Tarea 


2. document .getElementById("pictureBar").inner- 
HTML = imgDiv; 

在 JavaScript 文件 中 ， 这 行 代码 在 加 载 时 把 所 有 图 
像 放 到 页 面 上 ， 见 图 13-5。 

3. function jsonFlickrFeed(flickrData) { 

现在 ,你 肯定 想 知 道 设置 图 像 的 代码 在 哪儿 ， 这 是 
另 一 个 关键 之 处 : 这 些 代码 主要 在 数据 文件 ( 见 脚本 图 13-5 不 但 能 够 从 Flickr 的 服务 器 获得 图 像 ， 

还 能 够 获得 创建 页 面 所 用 的 数据 
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@ Internet | Protected Mode: On fà R10% ~ 
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13-12 ) 中 。 





数据 文件 包含 JavaScript 能 够 理解 的 代码 ， 采 用 ISON 格式 。 在 这 个 示例 中 ， 数 据 文件 假设 





要 寻找 一 个 名 为 jsonFlickrFeed() 的 函数 ， 所 以 我 们 在 这 里 创建 这 个 函数 。 通 过 参数 传递 的 是 存储 数据 
本 身 的 位 置 。 


4. for (var i=0; icflickrData. items. length; i++) { 


} 





imgDiv += di SIC= 
imgDiv += flickrData. items[i ].media.m.replace(/ m/g," s"); 
imgDiv += "' altz'" + flickrData.items[i T. title + "'»"; 














因为 数据 已 经 采用 JavaScript 能 够 理解 的 格式 ， 所 以 不 需要 再 做 很 多 工作 。 在 这 里 , 我 们 遍历 items 
数组 中 的 所 有 图 像 ,构造 一 个 将 在 屏幕 上 显示 t Ais 2) 的 文本 字符 串 。items 中 的 每 个 元 素 包 含 关 于 





























一 个 图 像 的 各 种 信息 , 但 是 我 们 只 需要 URL， 这 一 信息 存储 在 mediam 中 。 然 后 ， 使 用 正则 表达 式 把 

















中 等 大 小 的 图 像 转换 为 缩 略 图 。 
脚本 13-12 JSON 文件 的 片段 。 注 意 ， 它 的 大 小 约 是 XML 文件 的 一 半 , 但 是 包含 相同 的 数据 
jsonFlickrFeed({ 


"title": "Content from Paradise Ridge Sculpture Grove", 
"link": "http://www. flickr.com/photos/dorismith/sets/7215 7600976524175", 
"description": "The &lt;a href=&quot; http://www. paradiseridgewinery.com/&quot ;&gt;Paradise Ridge 
—Ninery&lt;/a&gt; not only has great wines, but they also have a sculpture garden. We visited on 22 
July 2007.", 
"modified": "2007-07-24T05:19:08Z", 
"generator": "http://www.flickr.com/", 
"items": [ 
{ 
"title": "IMG 0045.JPG", 
"link": "http://www. flickr.com/photos/dorismith/882590644/in/set-72157600976524175/", 
"media": ("m":"http://farm2.static.flickr.com/1063/882590644 5a4a0d89f3 m.jpg"], 
"date taken": "2007-07-22T13:42:49-08:00", 
"description": "&lt;p8gt;&lt;a href=&quot ;http: //www. flickr.com/people/dorismith/&quot ; 
一 &gt;Dori Smith&lt;/a&gt; posted a photo:&lt;/p&gt; &lt;p&gt;&lt;a href=&quot;http:// 
—www. flickr. com/photos/dorismith/882590644/&quot; title=&quot; IMG_0045.IPG&quot ;&gt;&1lt; 
—img src=&quot ;http://farm2.static. flickr. com/1063/882590644 5a4a0d89f3 m.jpg&quot; width= 
—&quot;240&quot; height=&quot;180&quot; alt=&quot; IMG_0045.JPG&quot; /&gt;&lt; /a&gt;&lt; 
—/p8gt; ", 
"published": "2007-07-24T05:19:08Z", 
"author": "nobody@flickr.com (Dori Smith)", 
"author id": "239221098N00", 
"tags": "winery sonomacounty sculptures dorismith paradiseridge paradiseridgesculptures" 


"title": "IMG 0032.JPG", 

"link": "http://www.flickr.com/photos/dorismith/882568164/in/set-72157600976524175/", 
"media": ("m":"http://farm2.static.flickr.com/1335/882568164 72eee9b41f m.jpg"], 

"date taken": "2007-07-22T13:35:09-08:00", 

"description": "&lt;p&gt;&lt;a href-&quot;http://www.flickr.com/people/dorismith/&quot; 

一 &gt;Dori Smith&lt;/a&gt; posted a photo:&lt;/p&gt; &lt;p&gt;&lt;a href=&quot;http:// 
—www.flickr.com/photos/dorismith/882568164/8quot; title-&quot;IMG 0032.JPG&quot;&gt;&lt; 

— img src-&quot;http://farm2.static.flickr.com/1335/882568164 72eee9b41f m.jpg&quot; width= 
—8&quot;240&8quot; height=&quot;180&quot; alt-8&quot;IMG 0032.JPG&quot; /&gt;&lt; /a&gt;&lt; 
—/p8gt; ", 

"published": "2007-07-24T05:15:14Z", 

"author": "nobody@flickr.com (Dori Smith)", 

"author id": "239221098N00", 

"tags": "winery sonomacounty sculptures dorismith paradiseridge paradiseridgesculptures" 
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}) 
V 提示 

















果 你 不 熟悉 JSON， 可 以 回顾 那 一 节 。 














口 我 们 在 第 10 章 介绍 对 象 字面 值 时 介绍 过 ISON. JSON 格式 本 身 是 对 象 字 面值 的 


口 不 必 总 是 使 用 步骤 1 中 的 URL。 实 际 上 ， 如 果 这 样 做 ， 只 会 得 到 与 这 个 页 面 完全 相同 的 结果 。 








个 子 集 。 如 








Flickr 允许 以 许多 组 合 方式 使 用 标签 、 集 和 组 ， 这 样 就 会 得 到 个 性 化 的 结果 。 访 问 Flickr, d 


到 符合 期 望 的 网 页 ， 
&format=json， 就 能 够 得 到 想 要 的 结 





口 第 3 步 中 函数 的 男 一 个 名 称 是 回调 。 只 要 我 们 将 代码 放 至 正 古 




















运行 , 但 哪怕 是 名 称 稍 有 差别 ， 都 不 会 正常 运行 。 


13.6 FA Ajax 预览 链接 


现在 的 许多 站 点 常常 采用 一 种 方便 的 视觉 效果 : 当月 
页 面 上 的 前 几 行 就 会 出 现在 鼠标 指针 下 的 浮动 窗口 中 ( 见 图 13-6 )。 这 是 一 个 非常 容易 创建 的 Ajax 应 





^ 


在 这 个 页 面 上 找到 提要 (feed) 地 址 。 然 后 ， 只 需 在 URL 的 末尾 加 上 


命名 的 回调 函数 中 , 它 就 会 正常 


日 户 将 鼠标 指针 移动 到 链接 上 时 ,链接 的 目标 








用 程序 。HTML 见 脚 本 13-13, CSS 见 脚本 13-14, JavaScript 见 脚 本 13-15。 











Previewing Links - Mozilla Firefox [ETSI] 
File Edit View History Bookmarks Tools Help 
"c fiy (L http//didropboxcom/u/2z {7 -| |$- Google P| Q- 





| Lj Previewing Links 


* August column 
* September column 
* October column 


* November qnjumn 


by Dori Smith 








Multiple Image Rollovers 


A Gentle Introduction to JavaScript 


http;//dl.dropbox.com/u/2127486/jsvqs8/ch13/jsintro/2000-11.html 


In my previous column, | showed how to do a simple image rollover. 
In the real world, however, it's rare that you're going to ever have just 














图 13-6 “SAPO tintin et Pe SU SUBEBE EINE, SASSER tit EY HTML 文件 ， 




















脚本 13-13 ”预览 示例 的 HTML 页 面 
<!DOCTYPE html» 
<html> 
<head> 


<title>Previewing Links</title> 


«link rel="stylesheet"href="script05.css"> 


<script src="script05.js"></script> 
</head> 
<body> 


且 在 预览 窗口 中 显示 文件 的 前 几 行 
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<h2>A Gentle Introduction to JavaScript</h2> 
<ul> 
<li><a href-"jsintro/2000-08.html"»August column«/a»«/li» 
<li><a href-"jsintro/2000-09.html"»September column«/a»«/li» 
<li><a href-"jsintro/2000-10.html"»October column«/a»«/li» 
<li><a href-"jsintro/2000-11.html"»November column«/a»«/li» 
</ul> 
<div id="previewWin"> </div> 
</body> 
</html> 


脚本 13-14 这 个 CSS 设置 预览 弹出 窗口 的 样式 


#previewWin { 
background-color: #FF9; 
width: 400px; 
height: 100px; 
font: .8em arial, helvetica, sans-serif; 
padding: 5px; 
position: absolute; 
visibility: hidden; 
top: 10px; 
left: 10px; 
border: 1px #CCO solid; 
clip: auto; 
overflow: hidden; 


} 


#previewWin hi, #previewWin h2 { 
font-size: 1.0em; 
} 


脚本 13-15 这 个 JavaScript 进行 服务 器 请 求 并 且 显 示 弹 出 窗口 


window.onload = initAll; 
var xhr = false; 
var xPos, yPos; 





function initAll() { 
var alllinks - document.getElementsByTagName("a"); 


for (var i=0; i< allLinks.length; i++) { 
allLinks[i].onmouseover = getPreview; 





} 
function getPreview(evt) { 
if (evt) { 
var url = evt.target; 
} 
else { 


evt = window.event; 
var url = evt.srcElement; 


parseInt(evt.clientX); 
parseInt(evt.clientY); 


xPos 
yPos 


if (window.XMLHttpRequest) { 
xhr = new XMLHttpRequest(); 


} 
else { 
if (window.ActiveXObject) { 
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try ( 
xhr = new ActiveXObject("Microsoft.XMLHTTP"); 


} 
catch (e) { } 


} 


if (xhr) { 
xhr.onreadystatechange = showContents; 
xhr.open("GET", url, true); 
xhr.send(null); 


else { 
alert("Sorry, but I couldn't create an XMLHttpRequest"); 
) 
} 


function hidePreview() { 
document. getElementById("previewWin").style.visibility = "hidden"; 


function showContents() { 
var prevWin = document.getElementById("previewWin"); 


if (xhr.readyState == 4) { 
if (xhr.status == 200) { 
prevWin.innerHTML = xhr.responseText; 


else { 
prevWin.innerHTML = "There was a problem with the request ”+ xhr.status; 


prevWin.style.top = yPos+2 + "px"; 
prevWin.style.left = xPos+2 + "px"; 
prevWin.style.visibility = "visible"; 
prevWin.onmouseout = hidePreview; 
} 
} 


=> 使 用 Ajax 预览 链接 








1. var allLinks = document.getElementsByTagName("a"); 


for (var i=0; i< allLinks.length;i++) { 
allLinks[i].onmouseover = getPreview; 


} 
这 是 initA OMRE. 它 遍 历 页 面 上 的 所 有 链接 , 并 且 在 每 个 链接 上 添加 onmouseover 事件 
处 理 程序 。 这 个 事件 处 理 程序 将 ( 你 下 面 将 看 到 的 ) 读 取 目 标 页面 并 且 向 (可 能 的 ) 访问 者 显示 预览 。 


2.if (evt) { 
var url = evt.target; 

































































} 
else { 
evt = window.event; 
var url = evt.srcElement; 


xPos = parseInt(evt.clientX); 
yPos = parseInt(evt.clientY); 


在 getpPreview() 中 ， 首 先 需要 查 明 要 读 取 哪个 文件 ， 这 就 要 查看 事件 的 属性 。 根 据 访问 者 使 用 的 
浏览 器 不 同 ，URL 保存 在 evt.target 或 window.event.srcElement 中 。 获 得 了 URL 之 后 , 就 可 以 获得 
鼠标 的 x 和 y 位 置 供 以 后 使 用 。 
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3. function hidePreview() { 
document.getElementById ("previewWin").style.visibility = "hidden"; 














如 果 打 算 显 示 预 览 , 将 需要 再 次 隐藏 它 ， 对 吗 ? hidePreview() 函 数 的 作用 是 将 预览 窗 口 的 可 见 性 
重新 设置 为 隐藏。 


4. var prevWin = document.getElementById("previewWin"); 
if (xhr.readyState == 


使 用 Ajax 读 取 文件 之 后 ,现在 进入 了 showContents() 函 数 , 我 们 将 previewWin 元 素 存 储 在 prevWin 
中 以 备 后 用 。 当 xhr.readyState 为 4 时 ， 就 该 显示 预览 了 。 


5. if (xhr.status == 200) { 
prevWin.innerHTML = xhr.responseText; 











else { 
prevWin.innerHTML = "There was a problem with the request " + xhr.status; 


prevWin.style.top = yPos42 + "px"; 
prevWin.style.left = xPos+2 +"px"; 
prevWin.style.visibility -"visible"; 
prevWin.onmouseout = hidePreview; 
如 果 一 切 正常 ， 那 么 xhr.status 为 200， 而 且 我 们 希望 放 在 prewin.innerHTML 中 的 数据 已 经 存 

在 于 xhr.responseText 中 了 。 如 果 出 现 了 问题 ， 就 在 prevWin.innerHTML 中 放 一 个 错误 消息 。 

在 此 之 后 ， 需 要 查 明 要 在 哪里 显示 预览 窗口 ， 也 就 是 当前 的 鼠标 X 和 y 坐标 。 这 个 窗口 是 一 个 弹 

出 窗口 ， 所 以 将 它 放 在 触发 该 调用 的 当前 鼠标 位 置 向 下 和 向 右 一 点 儿 的 地 方 (向 下 和 向 右 各 2 像素 )。 

最 后 ,将 prevWin 设置 为 可 见 ,并 且 让 JavaScript 知道 , 当 鼠 标 离 开 预 览 窗口 时 , 应 该 隐藏 prevWin。 
v 提示 
a 读 取 的 数据 是 HTML 格式 的 。 将 xhr.responseText 放 进 innerHTML 就 会 告诉 浏览 器 ， 当 显示 

预览 窗口 时 , 它 应 该 将 这 里 的 内 容 解释 为 HTML。 如 果 和 希望 显示 别 的 东西 (例如 , 希望 看 到 页 

向 的 实际 源 代码 )， 那 么 可 以 在 显示 预览 之 前 修改 innerHTML 中 的 内 容 。 

O Ajax 要 求 被 读 取 的 文件 驻 留 在 同一 服务 顺 上 ， 但 是 不 要 求 在 同一 目录 中 。 如 果 要 读 取 的 页 务 
在 另 一 个 目录 中 ,而 且 页 面包 含 相 对 链接 , 那么 这 些 链接 将 不 起 作用 。 如 果 页 面 引用 某 个 CSS 
文件 、 图 像 或 JavaScript， 那 么 不 能 预览 文件 的 这 些 部 分 。 对 此 可 以 采用 同样 的 解决 方案 : 在 
显示 之 前 修改 prevWin.innerHTML。 


13.7 自动 补 全 表单 字段 


帮助 站 点 访问 者 的 一 种 非常 好 的 方法 是 ， 降 低 在 字段 中 输入 数据 的 复杂 性 。 帮 助 用 户 填 写 具 有 大 
量 选项 的 表单 ， 从 而 帮助 他 们 节省 时 间 和 精力 ， 还 有 助 于 向 站 点 提供 有 效 的 数据 。 

例如 ， 当 用 户 在 一 个 表单 字段 中 进行 输入 时 ， 脚 本 13-16 (HTML )、 脚 本 13-17 (CSS) 和 脚本 
13-18 ( JavaScript ) 会 显示 与 输入 的 字母 匹配 的 美国 州 名 列表 ( 见 图 13-7 )。 随 着 用 户 输入 更 多 的 字母 ， 
这 个 列表 会 逐渐 缩短 ， 直 到 只 留 下 一 个 州 名 。 然 后 ， 这 个 州 名 就 会 自动 地 放 进 输入 字段 中 ,列表 也 会 
消失 。 
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eoo Auto-fill Form Fields eoe Auto-fill Form Fields 
|| a|» J AIA J + |@ http: //dl.dropbox.com/u/21274 © Ke Google >| aj [LA| A) ib) @ htp://di.dropbox.com/u/21274 © | [Qr Google 
Please enter your state: Please enter your state: 





New Hampshire 


New Mexico 








New Hampshir 
New Jersey 
New Mexico 

















e 












脚本 13-16 


<!DOCTYPE 
<html> 
<head> 


Al 13-7 随 着 输入 更 多 字母 ， 可 能 的 选择 净 





这 个 简单 的 HTML 提供 将 进行 自动 补 全 的 表单 字 


html» 


«title»Auto-fill Form Fields«/title» 
«link rel="stylesheet"href="script06.css"> 
«script src="script06.js"></script> 


«/head» 
«body» 


«form action="#"> 
Please enter your state:<br> 
<input type="text" id-"searchField" autocomplete="off"><br> 
<div id="popups"> </div> 
</form> 


</body> 
</html> 


脚本 13-17 


这 个 CSS 为 搜索 字段 和 弹出 菜单 设置 样式 


body, #searchfield { 


font 
} 


: 1.2em arial, helvetica,sans-serif; 


.suggestions { 
background-color: #FFF; 
padding: 2px 6px; 
border: 1px solid #000; 


} 


.suggestions:hover { 
background-color: #69F; 


} 


#popups { 


position: absolute; 


} 


#searchField.error { 
background-color: #FFC; 


} 


Be 
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脚本 13-18 这 个 JavaScript 处 理 服务 器 请 求 和 弹出 列表 的 显示 


window.onload = initAll; 
var xhr = false; 
var statesArray = new Array(); 


function initAll() { 
document. getElementById("searchField").onkeyup = searchSuggest; 


if (window.XMLHttpRequest) { 
xhr = new XMLHttpRequest(); 


} 
else { 
if (window.ActiveXObject) { 
try { 
xhr = new ActiveXObject ("Microsoft .XMLHTTP") ; 


} 
catch (e) { } 


} 


if (xhr) { 
xhr.onreadystatechange = setStatesArray; 
xhr.open("GET", "us-states.xml", true) ; 
xhr.send(null); 


} 
else { 
alert("Sorry, but I couldn't create an XMLHttpRequest") ; 


} 


function setStatesArray() { 
if (xhr.readyState == 4) { 
if (xhr.status == 200) { 
if (xhr.responseXML) { 
var allStates = xhr.responseXML.getElementsByTagName("item") ; 
for (var i=0; i«allStates.length; i++) { 
statesArray[i] = allStates[i].getElementsByTagName("label")[0].firstChild; 


} 


else { 
alert("There was a problem with the request 


+ xhr.status); 


} 


function searchSuggest() { 
var str = document.getElementById("searchField").value; 
document .getElementById("searchField").className = ""; 
if (str != "") { 


document. getElementById("popups").innexHTML = ""; 


for (var i-0; i<statesArray.length;it+) { 
var thisState = statesArray[i].nodeValue; 


if (thisState.toLowerCase().indexOf(str.toLowerCase())-- 0) { 
var tempDiv = document.createElement ("div"); 
tempDiv.innerHTML = thisState; 
tempDiv.onclick = makeChoice; 
tempDiv.className = "suggestions"; 
document. getElementById ("popups") .appendChild(tempDiv) ; 
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} 

var foundCt = document.getElementById("popups").childNodes.length; 

if (foundCt == 0) ( 
document.getElementById("searchField").className -"error"; 


} 

if (foundCt == 1) ( 
document.getElementById("searchField").value = document.getElementById("popups"). 
—firstChild.innerHTML; 
document.getElementById("popups").innerHTML - ""; 


} 
} 
function makeChoice(evt) { 
if (evt) { 
var thisDiv = evt.target; 
else { 
var thisDiv = window.event.srcElement; 
document. getElementById("searchField").value = thisDiv.innerHTML; 
document. getElementById("popups").innerHTML = ""; 
} 


> 建立 自动 补 全 表单 字段 


1. Please enter your state:<br> 
<input type-"text"id-"searchField" autocomplete="off"><br> 
<div id="popups"> </div> 
这 是 我 们 要 注意 的 HTML 代码 。 其 中 的 特殊 之 处 是 autocomplete 属性 ( 这 个 属性 是 非 标准 兼容 的 )。 
它 告 诉 浏览 器 不 要 在 这 个 字段 上 执行 任何 自动 补 全 ， 因 为 我 们 将 用 脚本 处 理 自 动 补 全 。 与 XMLHttp- 
Request 一 样 ， 尽 管 autocomplete 不 是 任何 W3C 建议 的 一 部 分 ， 但 是 它 得 到 了 很 好 的 跨 浏 览 器 支持 。 
2. document. getElementById("searchField").onkeyup = searchSuggest; 
为 了 捕捉 和 处 理 每 次 击 键 ,需要 一 个 事件 处 理 程序 ， 这 是 在 initAl1() 中 设置 的 。 


3. xhr.onreadystatechange =setStatesArray; 
xhr.open("GET", "us-states.xml",true); 
xhr.send(null); 


与 本 章 前 面 的 那些 照片 不 同 ， 美 国 的 州 名 不 太 可 能 发 生变 化 。 我 们 可 以 只 读 取 XML 文件 〈 见 脚 
本 13-3 ) 一 次 ， 对 数组 进行 初始 化 ， 并 且 可 靠 地 假设 列表 在 这 次 会 话 结束 之 前 一 直 是 有 效 的 。 


4. if (xhr.responseXML) { 
var allStates = xhr.responseXML.getElementsByTagName( " item"); 
for (var i-0; i«allStates.length; i++) { 
statesArray[i] = allStates[i].getElementsByTagName("label")[0].firstChild; 










































































} 
我 们 在 这 里 读 取 文件 , 查看 每 个 iten 节点 ,寻找 其 中 的 label 节点 ,并 且 存 储 label 的 firstChild 
( 州 名 本 身 )。 每 个 州 名 存储 在 statesArray 数组 中 的 一 个 元 素 中 。 


5. var str = document.getElementById("searchField").value; 


document.getElementById("searchField").className = ""; 


当 开 始 在 字段 中 进行 输入 时 ， 就 会 执行 searchsuggest() 事 件 处 理 程序 中 的 代码 。 首 先 获得 
searchField 的 值 ， 也 就 是 到 目前 为 止 已 经 输入 的 信息 。 接 下 来 ， 清 空 这 个 字段 的 class 属性 。 
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6.if (str != "") { 
document.getElementById("popups").innerHTML = ""; 


如 果 还 没有 输入 任何 信息 ， 就 不 做 任何 事 ， 所 以 在 这 里 进行 检查 ， 确 保 用 户 已 经 输入 了 某 个 值 ， 
然后 再 弹出 可 能 值 的 列表 。 如 果 已 经 输入 了 某 些 信息 ， 就 清空 以 前 的 可 能 值 列表 。 


7. for (var i=0; i«statesArray.length; i++) { 
var thisState = std seArzayii Lnodevalue: 























I3 























现在 ,遍历 州 名 的 列表 ,并且 将 当前 查看 的 州 名 存储 在 thisState 中 。 

8. if (thisState.toLowerCase().indexOf(str.toLowerCase())-- 0) { 

我 们 希望 检查 用 户 到 目前 为 止 输入 的 内 容 是 否 某 个 州 名 的 一 部 分 一 一 但 是 仅仅 这 样 还 不 够 ,我 们 
还 必须 确保 输入 的 内 容 位 于 州 名 的 开头 。 毕 竟 , 如 果 输 入 了 Kansas ,你 并 不 希望 下 拉 框 中 显示 Arkansas 
或 Kansas。 另 外 ， 在 进行 这 项 检查 时 ， 还 在 检查 index0f() 之 前 确保 两 个 字符 串 都 是 小 写 的 。 

如 果 indexof() 返 回 0 (也 就 是 说 ， 在 thisState 的 开头 位 置 处 找到 了 输入 的 字符 串 )， 那 么 我 们 
就 知道 找到 了 一 个 匹配 。 


9. var tempDiv = document.createElement("div"); 
tempDiv.innerHTML - thisState; 
tempDiv.onclick = makeChoice; 
tempDiv.className = "su gestions"; 
docuinent -getelemen tBytd( popups") .appendChild(tempDiv) ; 













































































因为 这 个 州 名 是 一 个 可 能 值 ， 我 们 希望 将 它 添加 到 要 显示 的 列表 中 。 实 现 方法 是 , 创建 一 个 临时 
的 div， 将 它 的 innerHTML 设置 为 这 个 州 名 ,添加 onclick 处 理 程序 和 className ， 然 后 将 整个 div 追 
加 到 popups div 中 。 将 每 个 州 名 作为 单独 的 div 添加 ， 这 样 我 们 就 能 够 使 用 JavaScript 和 CSS 操作 每 
个 州 名 。 

10. var foundCt = document.getElementById("popups").childNodes. length; 

2558 56 r3 IN FRAT SE SH EDI [Heel TER. T IE? 这 里 就 计算 这 
“MEL: foundCt, 


11. if (foundCt == 0) ( 
document.getElementById("searchField").className - "error"; 












































如 果 foundCt 是 0， 就 说 明 用 户 输入 了 错误 的 内 容 。 我 们 将 className 设置 为 error， 从 而 让 用 户 
知道 输入 错 了 ， 这 一 设置 会 使 输入 字段 显示 浅黄 色 背 景 (这 由 脚本 13-17 中 的 CSS 样式 规则 控制 )。 
12. if (foundCt == 1) { 
document .getElementById("searchField").value = document.getElementById 


— ("popups") .firstChild.innerHTML; 
document.getElementById("popups").innerHTML = ""; 



































如 果 foundct 是 1， 我 们 就 知道 找到 了 唯一 的 匹配 ， 所 以 可 以 将 这 个 州 名 放 进 字段 。 如 果 用 户 已 
经 输入 了 ca， 他 们 就 不 需要 再 输入 1ifornia， 因 为 我 们 已 经 知道 了 他 们 要 输入 哪个 州 名 。 我 们 使 用 
popups 中 唯一 的 div 填写 输入 字段 ， 从 而 自动 地 提供 完整 的 州 名 ,然后 清空 popups div. 


13. function makeChoice(evt) { 
if (evt) { 
var thisDiv = evt.target; 























uu 


























else { 
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var thisDiv - window.event.srcElement; 


} 
document.getElementById("searchField").value = thisDiv.innerHTML; 
document.getElementById("popups").innerHTML = ""; 











输入 州 名 的 另 一 种 方法 是 ， 单 击 弹出 列表 中 的 一 个 州 名 。 在 这 种 情况 下 ,会 调用 makeChoice() 3 
件 处 理 程序 。 首先, 我 们 通过 检查 事件 的 目标 , 查 明 用 户 单 击 了 哪个 州 名 , 这 会 提供 一 个 特定 的 div. 
查看 这 个 div 的 innerHTML 会 提供 州 名 ， 我 们 将 这 个 州 名 放 进 输入 字段 。 最 后 ， 清 空 可 能 值 的 弹出 
列表 。 
v 提示 
O 在 使 用 Google Instant 时 ,你 会 看 到 这 种 技术 的 示例 。 当 你 在 看 似 普通 的 Google 搜索 字段 中 进 
行 输入 时 ,会 显示 一 个 弹出 列表 ， 其 中 显示 搜索 结果 。 随 着 输入 的 进行 ,列表 中 的 搜索 结果 会 

O 你 可 能 会 注意 到 ， 除 了 演示 Ajax. XML 和 服务 器 端 技术 之 外 ， 这 个 示例 和 前 一 个 示例 还 花费 
了 许多 时 间 和 精力 来 使 效果 更 美观 。 这 是 因为 ， 许 多 被 认为 是 Ajax C 至 少 有 一 部 分 人 这 么 认 
为 ) 的 东西 不 但 涉及 底层 技术 ,而 且 涉 及 这 些 技术 的 表现 方式 。 接 下 来 几 章 的 目标 是 使 这 些 技 
术 的 应 用 更 加 简单 。 
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有 一 件 事 我 们 之 前 一 直 没 有 提起 : 编写 JavaScript 应 用 程序 并 非 易 事 。 一 般 而 言 ， 它 要 求 程 序 
员 掌 握 大 量 的 DOM, CSS, JavaScript 和 服务 器 资源 方面 的 知识 。 本 书 的 受众 是 初级 脚本 程 
序 员 ， 因 此 我 们 介绍 了 一 些 简单 易 懂 的 知识 ， 以 便 使 读者 感觉 学 习 这 些 知识 是 力所能及 的 。 不 过 , VF 
多 图 书 完全 面向 中 高 级 脚本 程序 员 ， 介 绍 如 何 创建 JavaScript 应 用 程序 ， 而 本 书 中 的 章节 无 法 替代 那 
种 深入 探讨 。 

那么 ， 这 是 和 否 意味 着 如 果 你 尚未 成 为 脚本 编程 高 手 ， 就 无 法 在 自己 的 网 站 中 善 用 JavaScript 呢 ? 
完全 不 是 ! 本 章 将 向 你 展示 如 何 利 用 JavaScript 工具 包 : 借助 已 经 预先 编写 好 的 库 和 函数 框架 ， 你 会 
在 项 目 实践 中 真切 地 感受 到 脚本 编程 的 强大 。 

目前 有 许多 工具 包 可 供 下 载 ， 而 且 大 部 分 都 是 免费 的 。 本 书 选 用 了 可 免费 下 载 且 开源 的 实用 程序 
和 控件 集 jQuery (jquery.com ) 来 构建 交互 式 Web 应 用 程序 。 我 们 认为 它 是 最 出 色 的 JavaScript 库 之 
一 。 在 接 下 来 的 几 章 中 , 我 们 将 介绍 如 何 使 用 jQuery 来 拖 放 页 面 元 素 、 添 加 菜单 和 日 历 、 创 建委 加 层 
和 排序 表格 数据 ， 总 的 来 说 ， 就 是 利用 jQuery 来 为 网 页 添加 绚丽 实用 的 效果 。 


为 什么 选用 jQuery 


无 论 开 发 人 员 有 怎样 的 编程 习惯 ， 总 会 有 与 之 相 适应 的 JavaScript 框架 。 换 和 句 话说 ， 库 的 种 类 
千差万别 、 良 著 不 齐 ， 而 即便 是 顶尖 级 的 库 也 各 有 千秋 。 









































































































































jQuery 库 的 优点 如 下 。 
口 轻 量 级 : 与 许多 竞争 者 相 比 ， 它 的 体积 要 小 得 多 ， 也 就 是 说 ， 使 用 jQuery 的 网 站 加 载 速度 
更 快 。 


口 活路 的 开发 社区 : 开发 人 员 有 问题 可 以 在 论坛 上 求助 ， 且 可 以 很 快 得 到 回复 。 另 外 ,还 可 以 
搜索 社区 文档 资料 ， 查 看 是 否 属于 常见 问题 。 

O 插件 架构 : 如 果 要 使 用 jQuery 中 没有 提供 的 功能 ， 很 可 能 有 人 已 编写 好 一 个 插件 了 。 插 件 
的 另 一 个 好 处 是 ， 只 有 在 需要 的 时 候 才 将 其 添加 到 网 站 中 ， 即 不 必 在 每 个 页 面 中 都 加 载 它 。 

口 速度 : 即使 在 由 其 竞争 者 所 发 起 的 速度 测试 中 , jQuery 亦 能 胜出 (参见 http://mootools.net/sli- 

ckspeed ). 

口 初级 开发 人 员 容 易 掌握 : jQuery 的 选择 查询 基于 CSS， 因 此 ， 非 全 职 专业 程序 员 也 能 轻松 运 
用 jQuery 来 为 其 网 站 添加 功能 ， 使 其 按期 望 的 方式 工作 。 

基于 上 述 理由 ， jQuery 已 成 为 时 下 最 流行 的 JavaScript 框架 之 一 。 
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> 在 页 面 中 添加 jQuery IE 
l.<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
脚本 14-1 包含 了 这 句 用 于 引入 jQuery FER HTML 代码 。 
2. $(document).ready(function() { 
alert("Welcome to jQuery!"); 


})3 











脚本 14-1 下 面 的 HTML 代码 为 页 面 引入 了 jQuery 库 











<!DOCTYPE html» 

<html> 

<head> 
«title»Welcome to jQuery!</title> 
«script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"> </script> 
<script src="script01.js"></script> 

</head> 

<body> 
«hi id="welcome"> «/hi» 

</body> 

</html> 


脚本 14-2 —/) Be jQuery 代码 ， 这 只 是 个 开始 


$(document) .ready(function() { 
alert("Welcome to jQuery!"); 
H; 


14.1 添加 jQuery 





为 了 在 网 站 中 使 用 JavaScript 框架 ， 你 需要 对 网 站 的 页 面 代码 做 出 一 些 修改 。 使 用 jQuery Wr, fX 


SS 














码 仅 需 少 量 修改 。 


你 可 能 注意 到 了 ， 脚 本 14-2 所 示 的 JavaScript 文件 看 起 来 有 些许 变化 。 不 必 惊 慌 。 下 面 的 代码 在 





图 14-1 之 前 我 们 已 经 见 过 很 多 次 了 ， 二 者 其 实 没什么 区 别 : 








window.onload = function() { 





elcome to jQuery! - Mozilla Firefox cal & 
alert("Welcome to jQuery!"); = to oue -Moa 
5 o > Q X f (L1 nte//didror v; ||- coop 人 
发 生变 化 的 地 方 如 下 : “Welcome to Quer! 


The page at http://dl,dropbox.com says: 


在 基于 jQuery 的 JavaScript 代码 中 , 人 们 首先 注意 | 











到 的 通常 是 美元 符号 $。 一 方面 是 由 于 在 普通 JavaScript 
代码 中 $ 符 号 并 不 常见 ， 另 一 方面 则 是 因为 $ 符 号 在 
jQuery 中 无 处 不 在 。 大 多 数 用 到 jQuery 的 代码 行 都 会 














以 $ 符 号 作为 开始 , 这 行 


行 代码 也 不 例外 。 MNA d 


一 个 合法 但 不 常见 的 函数 名 , jQuery 通过 它 来 获取 所 需 


的 一 切 。 





fà Welcome to jQuery! 
2 

















Read dl.dropbox.com 








图 14-1 ”欢迎 来 到 jQuery 的 精彩 世界 
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DQ document 

因为 我 们 无 论 做 什么 都 需要 通过 $， 那 么 ， 毫 无 疑问 应 该 首先 获取 document 对 象 〈 一 般 是 最 顶层 
的 元 素 )。 
口 ready() 
以 前 ,我 们 通过 检查 onload 事件 来 判断 页 面 是 否 完全 加 载 , 现在 则 依赖 于 jQuery 的 ready() 函数 。 
二 者 唯一 的 区 别 在 于 onload 是 事件 处 理 程序 ( 所 以 必须 赋 给 函数 )， 而 ready() 是 有 一 个 参数 的 函数 。 
v 提示 
Q 如 果 你 想 知 道 第 1 步 中 HTML 代码 行 的 出 处 ,请 阅读 “提供 jQuery” 附加 内 容 。 
O 第 2 步 中 代码 行 的 右 侧 ， 即 ready() 函 数 的 结尾 处 ， 并 不 需要 额外 的 右 半 个 圆 括号 。 
O 尽管 jQuery 是 最 轻 量 级 的 JavaScript 框架 之 一 ,还 是 有 办 法 让 它 变 得 更 “ 轻 ”; P RE jquery.min js, 

用 它 来 蔡 换 第 1 步 中 引用 的 jQuery 文件 。 这 个 版 本 的 代码 经 过 了 压缩 进而 能 够 获取 最 快 下 载 



















































































速度 。 
提供 jQuery 
以 前 ， 如 果 你 想 使 用 JavaScript 框架 ( 框架 的 另 一 个 名 字 是 “ 库 ”)， 那 么 你 需要 在 自己 的 服务 器 


上 提供 这 些 文件 。 经 常 访问 高 端 网 站 的 网 页 冲浪 者 可 能 在 一 天 之 内 下 载 到 各 不 相同 的 库 中 的 大 部 分 
(或 者 这 些 库 的 多 份 副本 )。 

现在 对 此 有 一 个 解决 方案 : 同 许多 框架 一 样 ， 从 CDN (Content Delivery Network， 内 容 发 布 网 
络 ) 来 获取 jQuery, CDN 上 能 够 提供 某 个 库 的 多 个 稳定 版 本 ， 而 你 可 以 直接 链接 到 上 面 。 这 意味 
着 ， 如 果 某 个 访客 正在 访问 你 的 网 站 ， 而 在 当天 ， 他 曾 访问 过 许多 其 他 使 用 jQuery 的 网 站 ， 那 么 ， 
他 的 浏览 器 端 可 能 已 经 缓存 了 所 需 的 库 文件 ， 如 此 一 来 ， 你 的 网 站 访问 速度 之 快 会 让 人 大 吃 一 惊 。 
退 一 步 来 说 ， 即 使 访客 的 浏览 器 端 没有 缓存 所 需 的 库 文件 ，Google ( 最 流行 的 CDN 之 一 ) 的 因 特 
网 连接 性 也 要 优 于 你 自己 实现 的 网 站 ， 所 以 CDN 提供 文件 的 速度 会 优 于 你 的 服务 器 。 

对 于 你 而 言 ， 仅 需 对 网 页 做 少量 修改 : 通常 需要 将 HTML 页 面 中 的 

<script src="directory/script.js"> 
修改 为 

<script src-"http://ajax.googleapis.com/ajax/libs/jquery/script.js"» 

你 可 能 对 不 断 改 进 的 版 本 感 兴趣 。 写 作 本 书 时 ，jQuery 的 最 新 版 本 为 1.6.1。 如 果 想 获取 此 版 
本 ， 可 将 上 面 的 URL 改 为 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"> 

如 何 获取 前 一 个 版 本 ? 

<script src-"http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"» 

如 何 获取 最 新 的 1.6.x 版 本 ? 

<script src-"http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"» 

如 何 获取 最 新 的 1.x 版 本 ? 

<script src-"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"» 

依 此 类 推 。 你 可 以 获取 自己 所 需 的 任意 版 本 ， 而 不 论 是 否 想 要 获取 最 新 的 版 本 ， 你 都 不 必 频 每 
更 改 链接 。 
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14.2 ”使 用 jQuery 更 新 页 面 


到 目前 为 止 , 本 书 介 绍 的 都 是 如 何 动态 更 新 网 页 ， 当 然 , 用 jQuery 也 能 做 到 。 虽 然 接 下 来 的 示例 
与 前 面 的 示例 类 似 ， 但 我 们 将 会 更 新 页 面 本 身 ， 而 不 是 仅 弹出 警告 框 ， 如 图 14-2 所 示 。 
eoo Welcome to jQuery #2! 


[< » je [+ @ http://dl.dropbox.com/u/21 e | fa- ogle D 
QA Apple Amazon Newsv Blog Stuffy Search Enginesv Mac Stuffy >» 



































Welcome to jQuery! 




















图 14-2 ”现在 ， 你 可 以 看 到 由 jQuery 生成 的 欢迎 界面 了 


=> 使 用 jQuery 更 新 页 面 


$("#welcome").append("Welcome to jQuery!"); 
示例 的 HTML 部 分 与 前 面 类 似 ， 不 再 显示 ， 现 在 ， 焦 点 集中 到 了 脚本 14-3 所 示 的 代码 行 上 。 
类 似 于 获取 document 对 象 ， 使 用 $ 从 页 面 上 获取 元 素 。 现 在 获取 到 了 #welcome 元 素 。 然 后 ， 我 们 
使 用 jQuery 的 append() 函 数 来 设置 元 素 的 innerHTML 属性 。 
V 提示 
O 你 可 能 觉得 # welcome 颇 像 CSS, WHF! jQuery 流行 的 原因 之 一 是 它 的 选择 器 与 CSS 中 的 选择 
器 非常 相似 ， 这 样 一 来 ， 偏 重 于 设计 的 开发 人 员 就 可 以 更 快 地 掌握 它 。 


脚本 14-3 ”我 们 用 来 修改 页 面 DOM 结构 的 jQuery 代码 行 


$(document).ready(function() { 
$("itwelcome").append("Welcome to jQuery!"); 









































35 
14.3 ”使 用 jQuery 交互 


前 面 介绍 了 一 些 基础 知识 ， 接 下 来 ， 我 们 将 展示 jQuery 的 强大 功能 。 脚 本 14-4 (HTML )、 脚 本 
14-5 (CSS ) 和 脚本 14-6 ( JavaScript ) 演示 了 如 何 轻 松 地 添加 少量 用 户 交 互 行为 。 


脚本 14-4 这 个 HTML 页 面 允许 用 户 选 择 标 题 的 颜色 


<!DOCTYPE html» 
<html> 
<head> 
«title»Welcome to jQuery #3!</title> 
<link rel="stylesheet" href="script03.css"> 
<script src="http://ajax.googleapis.com/ ajax/libs/jquery/1/jquery.js"> </script> 
<script src="script03.js"></script> 
</head> 
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<body> 
<h1 id="colorMe">Pick a color</h1> 
<p> 
<a id="red">Red</a> 
«a id="green">Green</a> 
<a id="blue">Blue</a> 
</p> 
</body> 
</html> 


脚本 14-5 有 许多 工作 要 借助 CSS 来 完成 


af{ 
display: block; 
padding: 10px; 
float: left; 
margin: 10px; 
font-weight: bold; 
background-color: silver; 

















} 
a:hover { 
color: white; 
background-color: gray; 
} 
.red { 
color: red; 
} 
.green { 
color: green; 
} 
.blue { 
color: blue; 
} 
页 面 上 有 三 个 像 按钮 一 样 的 链接 ， 分 别 是 红色 、 绿 色 和 蓝 色 。 当 用 户 单 击 其 中 一 个 时 ， 页 面 上 的 


标题 “Pick a color” 会 变 成 相应 选中 的 颜色 ， 如 图 14-3 所 示 。 


| @ Welcome to jQuery #3! - Internet Jem RES] 
0O- [E] hitp//didro... ~| |+] x || : 


File Edit View Favorites Tools Help 



















sly Favorites | 383 E] Bookmarklets 


@ Welcome to jQuery #3! | 位 bó 5 





Pick a color 


Ep ee 


@ Internet | Protected Mode: fa ~ 100% ~ 
xX J 


图 14-3 单 击 Red 按钮 会 让 标题 变 成 红色 
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> 添加 用 户 交 互 











1. $("a").click(function(event) { 

此 行使 用 了 jQuery 来 实现 交互 行为 , 即 当 用 户 单 击 文档 上 任意 链接 ( 即 锚 点 元 素 ) 时 , 会 执行 相 
应 的 操作 。 

2. $("#colorMe"). 

如 你 所 愿 ， 获 取 页 面 上 id 值 为 colorMe 的 元 素 。 

3. attr("class", 

传人 两 个 参数 时 ,函数 会 为 指定 的 元 素 特性 赋值 。 其 中 第 一 个 参数 是 特性 名 , 第 二 参数 是 其 新 值 。 
此 处 ， 我 们 将 为 元 素 的 class 特性 赋值 。 

4. $(this).attr("id")); 

$(this) 元 素 类 似 于 常见 的 this 元 素 , 它 的 值 取 决 于 其 所 处 的 上 下 文 环境 。 此 时 的 上 下 文 环境 
onclick 事件 处 理 程序 ， 因 此 ， 我 们 能 够 获得 用 户 刚 刚 单 击 过 的 那个 链接 。 

我 们 真正 想 要 获取 的 是 元 素 的 id 值 ， 即 red. green 或 blue。 将 值 作 为 参数 传 给 在 第 3 步 中 仅 设 
置 了 一 个 参数 一 一 特性 名 一 一 的 attr() 函 数 。 随 后 ， 值 会 被 存储 为 标题 的 class 特性 的 新 值 ，CSS 会 
接收 新 值 ， 进 而 自动 更 新 标题 颜色 。 

5. event.preventDefault(); 

Heya, HTML BEBE peel, DSURCSIS Bese ND V8 as E129 CAKAT o TE jQuery 中 ， 
调用 event 对 象 的 preventDefault() 方 法 能 够 阻止 默认 行为 的 发 生 。 


脚本 14-6 ”真正 的 变化 只 需 寥寥 儿 行 jQuery 代码 即 可 实现 


$(document).ready(function() { 
$("a").click(function(event) { 
$("#colorMe").attr("class", $(this).attr("id")); 
event.preventDefault(); 











im 























, 


Ds 
144 ”交互 与 更 新 


如 果 前 面 的 示例 没有 让 你 获得 足够 多 的 更 新 信息 ， 也 没有 让 你 感受 到 很 多 互动 , 那么 接 下 来 的 示 
例会 让 你 有 更 深刻 的 体会 。 现 在 , 按钮 文本 也 会 随 之 改变 颜色 ， 如 图 14-4 Bro, 这 样 ， 用户 就 能 知道 
自己 的 鼠标 停 在 了 哪个 按钮 上 。 

















Pick a color 


司 m 四 
s 


图 14-4 ” 当 用 户 将 鼠标 停 在 某 个 按钮 上 时 ,会 得 到 相应 的 提示 


你 可 能 已 经 猜测 到 了 ，HTML 部 分 与 前 面 的 示例 相似 ,不 再 袭 述 ; 脚本 14-7 (CSS ) 和 脚本 14-8 
( JavaScript ) 包含 了 所 有 重要 内 容 。 
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脚本 14-7 借助 jQuery 完成 更 多 工作 后 ， 我 们 可 以 对 CSS 代码 进行 精简 


a{ 
display: block; 
padding: 10px; 
float: left; 
margin: 10px; 
font-weight: bold; 
color: white; 
background-color: gray; 


.red { 
color: red; 


.green { 
color: green; 


.blue { 
color: blue; 
} 


脚本 14-8 ”完成 这 个 任务 仍然 不 需要 太 多 的 jQuery 代码 


$(document).ready(function() { 
$("a").hover(function() { 
$(this).css(( 
"color": $(this).attr("id"), 
"background-color": "silver" 
H; 
DE 
$("a").mouseout(function() ( 
$(this).css(( 
"color": "white", 
"background-color": "gray" 
»; 
DE 


$("a").click(function(event) { 
$("#colorMe").attr("class",$(this).attr("id")); 
event .preventDefault(); 


})3 
5 


进一步 增强 交互 和 更 新 

1. $("a").hover(function() { 

仅 借 助 CSS 是 无 法 更 新 按钮 状态 的 , 所 以 我 们 需要 使 用 jQuery KEM, jQuery 中 的 hover () 函数 
等 价 于 mouseover. 

2. $(this).css( 

在 考虑 将 鼠标 悬 停 于 某 个 对 象 上 时 ， 我 们 打算 改变 它 的 一 些 特性 。 即 将 被 修改 的 特性 均 与 CSS 
相关 ， 因 此 我 们 可 以 使 用 css Q PRICE 

3. { 








"color": $(this).attr("id"), 
" background-color": "silver" 


» 
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此 处 ， 我 们 会 同时 修改 多 个 特性 ， 所 以 需要 传人 一 个 对 象 字 面 量 (Object Literal ) 列表 : 一 对 花 
括号 “{}” 中 包含 的 一 系列 名 值 对 ， 每 个 名 值 对 之 间 用 至 号“,” 分 隔 ， 每 个 名 值 对 内 部 的 名 字 和 值 之 
间 用 冒号 “:” 分 隔 。 

将 对 象 字面 量 列表 传 给 css() 函 数 后 ， 元 素 的 字体 颜色 和 背景 颜色 会 被 重 设 为 传人 的 值 。 

4. $("a").mouseout(function() { 

这 行 代 码 用 于 实现 hover() 的 另 一 半 效 果 : mouseout()。 用 户 的 鼠标 光标 移出 按钮 区 域 后 , 我 们 和 希 
望 按 钮 能 够 恢复 到 初始 的 颜色 。 

5. { 

"color": "white", 
"background-color": "gray" 


这 就 是 我 们 最 初 的 按钮 配色 方案 

V 提示 

口 如 果 你 想 了 解 更 多 关于 对 象 字面 量 的 相关 知识 ， 可 以 参考 第 10 章 的 内 容 。 

O 你 可 能 想 知道 是 否 真 的 需要 mouseout () 部 分 的 代码 一 一 毕竟 ,如 果 被 重 置 的 值 是 静态 的 ,能 否 
只 通过 CSS 来 实现 呢 ? 很 可 惜 , 答案 是 否定 的 。 hover() 修 改 了 按钮 的 颜色 后 , 除非 使 用 jQuery 
重 置 ， 否 则 按钮 会 一 直 保持 修改 后 的 颜色 。 








灰 底 日 字 。 















































其 他 工具 包 
在 20 世纪 90 AR, 动态 HTML 非常 流行 ， 人们 编写 了 大 量 的 DHTML 工具 包 。 事实 上 , 一 
部 分 最 优秀 的 工具 包 是 由 无 固定 职业 的 自由 开发 人 员 在 车 库 里 编写 的 。 后 来 ， 随 着 因特网 爆炸 式 地 
迅速 发 展 , 工具 包 的 作者 们 有 了 固定 的 工作 , 他们 遗弃 了 自己 曾经 编写 过 的 工具 包 或 者 不 再 对 其 进 
行 维护 。 基 于 此 ， 为 本 书 的 早期 版 本 寻找 合适 的 JavaScript LAAN, 我们 颇 有 点 担心 找 不 到 。 
我 们 之 所 以 在 本 书 中 选择 并 介绍 jQuery 是 因为 它 的 文档 齐全 、 性 能 优异 、 开 源 ， 而 且 还 有 一 
个 庞大 的 开发 者 社区 积极 地 为 其 提供 支持 ， 这 意味 着 在 本 书 的 生命 周期 内 ， 它 基本 上 会 始终 存在 。 
当然 ， 还 有 很 多 其 他 优秀 的 工具 包 。 甚 至 还 有 些 网 站 会 对 不 同 的 工具 包 进 行 打分 。 本 书 出 版 之 际 ， 此 类 
网 站 中 ,我 们 最 欣赏 维基 百科 ， 详 见 http://en.wikipedia.org/wiki/Comparison of JavaScript frameworks. 
在 选择 工具 包 时 ， 最 重要 的 标准 莫 过 于 考察 它 是 否 在 支持 Web 标准 方面 做 得 很 好 。 换 和 名 话说 ， 
工具 包 要 能 够 跨 平 台 支 持 所 有 的 主流 浏览 器 。 对 我 们 而 言 ， 主 流 浏览 器 包括 Windows 和 Mac 平台 
上 的 Firefox、Safari、Chrome 和 Opera， 以 及 仅 针 对 Windows 平台 的 IE8 及 更 高 版 本 。 此 外 ， 还 有 
一 条 标准 对 于 考察 工具 包 优 劣 很 重要 ， 即 工具 包 是 否 经 过 全 面 调试 以 及 它 的 文档 是 否 齐 全 。 
我 们 建议 你 也 了 解 一 下 下 面 的 这 些 工具 包 ， 它 们 广为人知 、 有 良好 的 技术 支持 、 文 档 齐全 且 在 
各 自 网 站 上 有 大 量 详实 的 示例 可 供 参 考 。 
D Dojo (http://dojotoolkit.org ); 
Q YUI (http://developer.yahoo.com/yui/ ); 
QO Prototype ( http://prototypejs.org )。 
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14.5 自动 完成 字段 


你 可 能 记得 ， 在 上 一 章 的 末尾 ,我 们 编写 了 大 量 的 代码 来 阻止 用 户 输入 无 效 的 美国 州 名 。 而 在 这 
s, AHERPBLIOPTALFY jQuery EORR. BERE 149 A HTML AHS, OA 14-10 A6 Iova ft. 


— 使 用 jQuery 处 理 自动 完成 字段 


1. var stateList = "Alabama*Alaska*Arizona*Arkansas*California*Colorado*Connecticut* Delaware* 
—Florida*Georgia*Hawaii*Idaho*Illinois*Indiana*Iowa*Kansas*Kentucky*Louisiana*Maine* 
—Maryland*Massachusetts*Michigan*Minnesota*Mississippi*Missouri*Montana*Nebraska* 
—Nevada*New Hampshire*New Jersey*New Mexico*New York*North Carolina*North Dakota*Ohio* 
—Oklahoma* Oregon* Pennsylvania*Rhode Island*South Carolina*South Dakota*Tennessee* 
—Texas*Utah* Vermont*Virginia* Washington*West Virginia*Wisconsin*Wyoming*"; 


我 们 需要 州 名 列表 ， 而 这 次 ,我 们 将 其 硬 编码 到 变量 statelist 中 。 一 共有 50 个 州 名 ， 它 们 之 间 
以 星 号 分 隔 。 


脚本 14-9 HTML 页面 引入 了 功能 实现 所 依赖 的 工具 包 


<!DOCTYPE html» 
<html> 
<head> 
<title>Auto-fill Form Fields</title> 
<link rel="stylesheet" href-"http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css"» 
<script src-"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"»«/script» 
<script src-"http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"»«/script» 
<script src="script05.js"></script> 
</head> 
<body> 
<div class="ui-widget"> 
<label for="searchField">Please enter your state:</label> 
<input id="searchField"> 

















</div> 
</body> 
</html> 
脚本 14-10 jQuery 化 繁 为 简 
$(function(){ 


var stateList = "Alabama*Alaska*Arizona*Arkansas*California*Colorado*Connecticut*Delaware*Florida* 
—Georgia*Hawaii*Idaho*Illinois*Indiana*Iowa*Kansas*Kentucky*Louisiana*Maine*Maryland*Massachusetts* 
—Michigan*Minnesota*Mississippi*Missouri*Montana*Nebraska*Nevada*New Hampshire*New Jersey*New Mexico* 
一 New York*North Carolina*North Dakota*Ohio*Oklahoma*Oregon*Pennsylvania*Rhode Island*South Carolina* 
一 South Dakota*Tennessee*Texas*Utah*Vermont*Virginia*Washington*West Virginia*Wisconsin*Wyoming*"; 


$("itsearchField").autocomplete(( 
source: statelist.split("*") 


DE 





35 

2. $("itsearchField").autocomplete(( 

每 当 用 户 在 searchField 文本 框 中 输入 内 容 时 ， 执 行 相应 操作 。 

3. source: stateList.split("*") 

autocomplete() 函 数 有 一 个 需要 赋值 的 元 素 一 “source。source 元 素 的 值 类 型 是 数组 ， 那 么 ， 我 
们 要 做 的 就 是 使 用 split() 函 数 将 stateList 变量 中 的 值 依据 星 号 分 隔 并 形成 一 个 数组 .将 获得 的 数组 
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传人 后 ， 余 下 的 全 部 工作 交 由 jQuery 来 完成 ， 如 图 14-5 所 示 。 

















ene Auto-fill Form Fields 
li LI Auto-fill Form Fields | + 2 
©) m | (ae) (L htp://dl.dropbox.ce ^ v CM Googie Q) |] [3] 
Please enter your state: |ne| | 
Connecticut 
Maine 


Minnesota k 
Nebraska 
Nevada 


New Hampshire 









































New Jersey 
New Mexico 
New York 
Tennessee 
-x * 
图 14-5 ”此 菜单 支持 用 户 通过 输入 、 单 击 或 者 方向 键 上 下 控制 的 方式 从 下 拉 列 表 中 选择 州 名 








v 提示 

Q 本 例 与 前 面 章节 中 的 示例 不 尽 相 同 。 例 如 ， 本 例 中 没有 限制 必须 从 州 名 的 起 始 位 置 进行 匹配 。 

另 一 方面 ,本 例 实现 了 前 例 中 没有 的 重要 功能 : 它 支 持 用 户 使 用 方向 键 来 从 下 拉 菜 单 中 选择 州 名 。 

O 你 可 能 会 产生 这 样 的 疑问 : 包括 下 拉 菜 单 在 内 的 页 面 样式 从 何 而 来 ? 事实 上， 它们 都 包含 在 
jQuery UI 之 中 ， 即 本 书 下 一 章 的 主题 。 


















































深入 了 解 jQuery 
如 果 本 章 的 简短 介绍 让 你 产生 了 深入 了 解 jQuery 的 想法 ， 那 么 你 可 以 查阅 下 面 这 些 参考 资料 。 
O jQuery 的 官方 网 站 是 www.jquery.com. 
Q 可 以 从 http://docs.jquery.com/Downloading jQuery 下 载 jQuery ( 各 种 版 本 均 可 从 此 处 下 载 )。 
口 jQuery 维基 文档 位 于 http://docs.jquery.com。 如 果 你 认为 上 面 的 东西 还 不 够 全 面 ，jQuery 的 
维护 者 们 欢迎 你 在 上 面 添 加 内 容 。 
口 可 以 通过 Web 方式 和 RSS 方式 访问 jQuery 的 论坛 http://forum.jquery.com。 
口 如 果 你 想 找 jQuery 的 教程 ， 那 么 可 以 访问 http://docs.jquery.com/Tutorials， 上 面 有 很 多 教程 
( 包括 截屏 )。 
口 就 其 本 身 而 言 ,jQuery 的 主要 用 途 是 增强 功能 -如果 你 要 做 的 工作 主要 是 改变 页 面 外 观 效果 ， 
那么 你 需要 使 用 jQuery UI， 具 体内 容 可 以 查看 http://jqueryui.com。 
O 如 果 你 想 要 的 功能 并 没有 包含 在 jQuery 中 ， 可 能 有 一 些 插 件 可 供 选 用 ， 这 些 插件 可 通过 
http://plugins.jquery.com 获得 。 
O 最 后 ,但 也 很 重要 的 是 jQuery 的 官方 博客 http://blog.jquery.com。 
讨论 jQuery 的 同时 ,还 应 当 称赞 其 创造 者 兼 首席 开发 人 员 John Resig。 他 的 网 站 是 http://ejohn.org。 





FA jQuery 设计 页 面 








Web 开发 进入 需要 使 用 JavaScript 框架 时 代 的 同时 , Web 设计 也 开始 频繁 考虑 使 用 特定 的 用 
Tous ( 比如 滑 入 和 滑 出 屏幕 的 元 素 以 及 无 所 不 在 的 “黄色 渐变 ”等 )。 这 并 非 巧 合 ， 
jQuery 成 功 的 主要 原因 之 一 就 是 它 的 好 朋友 : jQuery Ul, AFI, jQuery 就 是 通过 jQuery UI 来 处 
理 常用 的 用 户 界面 元 素 的 。 
在 本 章 中 , 我 们 将 讨论 Web 2.0 界面 外 观 , 包括 如 何 创建 以 及 为 什么 使 用 它 。 为 了 说 明 这 些 问 题 ， 
我 们 将 深入 介绍 jQuery 和 jQuery UI 的 优点 和 用 法 。 然 后 讨论 如 何 突 出 显示 元 素 、 创 建 可 折 双 菜单 和 
显示 模 态 对 话 框 ， 并 实现 相关 联 的 视觉 效果 。 最 后 将 实现 更 漂亮 的 表格 ,包括 斑马 纹 (便于 阅读 ) 和 
按 任 何 列 排序 。 


15.1 突出 显示 新 元 素 


“黄色 淡出 ”差不多 已 经 成 了 Web 设计 的 标志 : 当 页 面 上 出 现 新 内 容 时 ， 它 会 先 显示 在 黄色 背景 
上 ， 然 后 黄色 背景 慢 慢 赔 变 为 白色 C 即 站 点 的 一 般 背 景 颜色 ) 。 这 种 巧妙 的 做 法 能 够 提醒 访问 者 注意 
发 生变 化 的 内 容 ， 避 免 了 跟踪 内 容 新 旧 程度 的 负担 。 

这 个 示例 还 可 以 很 好 地 说 明 jQuery UI， 因 为 只 需 几 行 代码 ， 就 可 以 实现 丰富 的 效果 。 




























































































> 突出 显示 元 素 








1. «script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script> 
«script src-"scripto1.js"»«/script» 


为 了 让 脚本 15-10 HTML. 页 面 ) 能 够 使 用 jQuery UL, 它 需 要 访问 两 个 文件 :jqueryjs 和 jquery-ui js. 
需要 的 第 三 个 文件 是 我 们 自己 的 本 地 脚本 文件 ， 名 为 script01.js。 


脚本 15-1 ”只 需 在 页 面 开 头 添 加 几 个 <script> 标 签 ， 就 可 以 添加 jQuery 功能 


<!DOCTYPE html» 

<html> 

<head> 
<title>Show/Hide Text</title> 
«script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui. js"></script> 
<script src="script01.js"></script> 

</head> 
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<body> 
<a href="#" id-"textToggle"»show/hidetext«/a»«br» 
<div id="bodyText">Lorem ipsum dolor sitamet,consectetuer adipiscing elit.Nulla viverra aliquet mi. 
—Crasurna. Curabitur diam. Curabitur erosnibh, condimentum eu, tincidunt at,commodo vitae, nisi. Duis 
—nulla lectus, feugiat et, tincidunt nec,iaculis vehicula, tortor. Sed tortor felis, viverra vitae, 
— posuere et,ullamcorper a, leo. Suspendisse euismod libero at orci. Pellentesque odio massa, condimentum 
—at,pellentesque sed, lacinia quis,mauris. Proin ultricies risus cursus mi. Cras nibh quam, adipiscing 
vel, tincidunt a, consequat ut,mi. Aenean neque arcu, pretium posuere, tincidunt non, consequat sitamet, 
—enim. Duis fermentum. Donec euaugue. Mauris sit amet ligula.</div> 

</body> 

</html> 


2. $(document).ready(function() { 
在 脚本 15-2 中 ,开始 编写 JavaScript 例 程 。 这 里 的 代码 与 在 其 他 地 方 使 用 的 代码 不 同 ， 没 有 以 
document .onload 开头 一 一 我 们 和 弄 错 了 吗 ? 





























脚本 15-2 ”这 上 段 JavaScript (使 用 jQuery 和 jQuery UI ) 简化 了 新 页 面 元 素 的 突出 显示 
$(document).ready(function() { 
$("#bodyText").hide(); 


$("#textToggle").toggle( 
function() { 
$("#bodyText").show("slow"); 
$("#bodyText").effect("highlight",{}, 2000); 


function() { 
$("#bodyText").hide(); 
); i 

})3 

实际 上 没有 错 ， 这 只 是 jQuery 的 语法 ， 它 实际 上 指 的 是 相同 的 东西 。 按 照 jQuery 的 语法 ， 美 元 
符号 $ 是 指 它 本 身 ( 而 不 是 其 他 JavaScript 对 象 ) 。 我 们 要 向 jQuery 传递 document 对 象 ， 也 就 是 当前 
文档 。 然 后 ， 使 用 jQuery 内 置 的 ready() 方 法 ， 当 JavaScript 准备 好 开始 处 理事 件 时 ， 会 自动 触发 这 
个 方法 。 希望 在 加 载 文档 时 执行 的 所 有 代码 都 必须 传递 给 $(document).ready()。 在 这 里 ,我 们 传递 一 
个 匿名 函数 ， 见 后 面 几 个 步骤 。 — 

3. $("fbodyText")..hide(); CE 

jQuery 最 有 用 的 特性 之 一 是 指定 要 操作 的 对 象 的 方 。 | stewie Tot 7 = 
式 。 这 种 方式 实际 上 很 像 CSS。 在 编写 CSS 规则 时 ,如 || se 
果 和 希望 隐藏 id 为 bodyText 的 元 素 ， 可 能 会 编写 下 面 这 
样 的 代码 : 

#bodyText { display:none; } 

可 以 看 到 ，CSS 比 等 效 的 JavaScript 命令 简短 得 多 : 

document.getElementById("bodyText").style.display = "none"; 

这 一 步 中 代码 行 的 作用 与 上 面 的 标准 JavaScript 和 CSS 5 
规则 的 相同 : 它 让 浏览 器 不 显示 指定 的 元 素 ， 见 图 15-1。 它 ”图 15-1 在 最 初 加 载 页 面 时 ， 页 面 上 没有 
使 用 jQuery 内 置 的 hide() 方 法 ， 这 个 方法 不 需要 参数 。 太 多 内 容 
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4. $("#textToggle").toggle( 
在 这 里 ， 我 们 调用 另 一 个 jQuery 内 置 方法 : toggle()。 前 一 步 中 的 代码 在 加 载 文档 时 运行 ， 而 这 
一 行 由 某 一 事件 触发 一 一 它 在 单 击 id 为 textToggle 的 元 素 时 运行 。 
需要 通过 参数 向 toggle() 方 法 传递 两 个 函数 , 它们 分 别 包 含 在 toggle() 的 两 种 状态 下 应 该 执行 的 
代码 。toggle() 方 法 会 记 住 它 的 当前 状态 ， 所 以 它 会 在 被 触发 时 自动 切换 到 另 一 种 状态 C 即 运 行 男 一 
个 函数 中 的 代码 ) 。 
5. function() { 
$("#bodyText").show("slow") ; 
$("#bodyText").effect("highlight", {}, 


Ts 
这 是 传递 给 toggle() 的 第 一 个 函数 ,首先 ,让 jQuery 寻找 id X bodyText 的 元 素 , 这 是 在 调用 show() 


时 要 显示 的 元 素 。show() 方 法 有 一 个 参数 : 字符 串 "slow" ， 这 让 jQuery 缓慢 地 显示 出 新 元 素 。 








2000) ; 














完成 之 后 ， 调 用 jQuery UI 的 effect() 方 法 并 传递 以 下 3 个 参数 。 
口 “highlight"， 我 们 需要 的 效果 。 
OQ {}， 所 需 的 效果 选项 。 黄 色 淡 出 技术 非常 流行 ， 所 以 黄色 是 默认 颜色 ， 因 此 这 里 不 需要 修改 








任何 选项 

口 2000, 希望 显示 效果 的 速度 。 这 个 值 以 毫秒 为 单位 ， 所 以 2000 意味 着 希望 在 两 秒 内 显示 淡出 
效果 。 图 15-2 显示 最 初 的 淡出 效果 ， 图 15-3 显示 最 终结 

6. function() { 

$("#bodyText").hide(); 

} 




















@ Show/Hide Text - Mozilla Firefox tex") @ Show/Hide Text - Mozilla Firefox Se) 
File Edit View History Bookmarks Tools Help File Edit View History Bookmarks Tools Help 
ee Q X A (LI htp//didropboxc vy ~| |$ Googie P] Gr e - E A (L htp//didropboxce vy ~| |$- Googie P| 





||) Show/Hide Text ES 上 Lj Show/Hide Text - EJ 


show/hide text 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla viverra aliquet mi. 
Cras urna. Curabitur diam. Curabitur eros nibh, condimentum eu, tincidunt at, 


show/hide text 
Doremipsum dolor sit amet, consectetoer adipiscing ct: Nela viverra aliquet iai. 


non, consequat sit amet, enim. Duis fermentum. Donec eu augue. Mauris sit amet 











http://dl.dropbox.com/u/2127486/jsvqs8/ch15/script0L.htmit —— 




















commodo vitae, nisi. Duis nulla lectus, feugiat et, tincidunt nec, iaculis vehicula, 
tortor. Sed tortor felis, viverra vitae, posuere et, ullamcorper a, leo. Suspendisse 
euismod libero at orci. Pellentesque odio massa, condimentum at, pellentesque 
sed, lacinia quis, mauris. Proin ultricies risus cursus mi. Cras nibh quam, adipiscing 
vel, tincidunt a, consequat ut, mi. Aenean neque arcu, pretium posuere, tincidunt 
non, consequat sit amet, enim. Duis fermentum. Donec eu augue. Mauris sit amet 





Done 

















p i cet aah a M 
字符 串 "slow"。 另 外 , 如 果 取 消 传递 





显示 时 相同 的 方式 ) ， 





图 15-2 单 击 链接 ， 就 会 在 黄色 背景 上 显示 文本 ， 图 15-3 ”最 终 的 页 面 显示 
然后 黄色 逐渐 淡出 
这 是 toggle() 的 另 一 种 状态 , 它 仅 仅 让 bodyText 元 素 再 次 隐藏 起 来 ,就 与 代码 开头 处 所 做 的 一 样 。 
v 提示 


可 以 在 最 后 一 步 中 向 hide() 传 递 

















给 show() 的 "slow" 参 数 , 元 素 会 立即 显示 而 不 是 缓慢 显示 。 
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口 大 家 是 否 注意 到 了 jQuery Ul 上 面 的 一 行 引 用 ”如 果 没 有 ， 那 么 在 此 解释 一 下 。 这 是 jQuery 
最 好 的 功能 之 一 : 两 者 可 以 如 此 完美 地 协同 工作 , 我 们 完全 可 以 不 去 考虑 哪些 函数 是 从 谁 那儿 
引入 的 。 在 这 个 例子 中 ，effect() 方 法 其 实 是 jQuery UI 的 一 部 分 。 

口 可 能 大 家 会 有 疑问 , 为 什么 jQuery 不 把 它 的 UI 元素 纳入 其 中 ?要 提醒 大 家 的 是 , jQuery 使 用 
的 很 多 框架 都 在 后 台 起 作用 ， 没 有 必要 总 是 把 用 不 到 的 UI 效果 也 一 起 加 载 。 


15.2 PIR HBS 


选择 框架 的 一 种 方法 是 ， 确 定 经 常 需要 在 站 点 中 添加 的 某 种 功能 ， 然 后 看 看 该 框架 对 于 完成 这 个 
RAER ERE, RAER THERY (accordion menu) 。 在 这 种 菜单 中 ， 当 打开 一 
个 部 分 时 ， 其 他 部 分 会 自动 关闭 。 与 选项 卡 式 界面 相似 ， 它 也 是 一 种 常用 的 设计 元 素 。 


> 创建 可 折 靶 菜单 













































































1. «link rel="stylesheet"href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ 
—cupertino/jquery-ui.css"> 
<link rel="stylesheet"href="script02.css"> 


脚本 15-3 需要 两 个 CSS 文件 : 一 个 是 由 jQuery 提供 的 〈 使 用 它 的 内 置 方案 之 一 ) ， 另 一 个 是 我 
们 自己 的 (script02.css， 见 脚本 15-4 ) ， 它 添加 一 点 儿 CSS 代码 ， 从 而 实现 我 们 希望 的 效果 。 


脚本 15-3 ”这 个 大 纲 中 的 链接 将 通过 jQuery 在 浏览 带 中 显示 为 可 折 盖 菜单 


<!DOCTYPE html» 
<html> 
<head> 
<title>Accordion Menus</title> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/cupertino/ 
jquery-ui.css"> 
<link rel="stylesheet" href="scripto2.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script> 
«script src="script02.js"></script> 
</head> 
<body> 
«hi»Shakespeare's Plays</h1> 
<div id="tabs"> 
<ul id="theMenu"> 
<li><a href-"menui.html" class="menuLink">Comedies</a> 
<ul> 
<li><a href="pg1.html">All's Well That Ends Well«/a»«/li» 
<li><a href="pg2.html">As You Like It«/a»«/li» 
<li><a href-"pg3.html"»Love's Labour's Lost«/a»«/li» 
<li><a href-"pg4.html"»The Comedy of Errors«/a»«/li» 
</ul> 
</li> 
<li><a href-"menu2.html" class="menuLink">Tragedies</a> 
<ul> 
<li><a href="pg5.html">Anthony &amp; Cleopatra«/a»«/li» 
<li><a href-"pg6.html"»Hamlet«/a»«/li» 
<li><a href-"pg7.html"»Romeo &amp; Juliet«/a»«/li» 
</ul> 
</li> 
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<li><a href-"menu3.html" class="menuLink">Histories</a> 
<ul> 

<li><a href-"pg8.html"»Henry IV, Part 1</a></li> 

<li><a href-"pg9.html"»Henry IV, Part 2</a></li> 


«/ul» 
</li> 
</ul> 
</div> 

</body> 

</html> 

脚本 15-4 尽管 我 们 在 前 面 已 经 实现 了 相似 的 菜单 ， 但 是 使 用 jQuery 可 以 减少 大 量 CSS 代码 

#theMenu { 


width: 400px; 
} 


ul li a.menuLink { 
display: block; 
padding-left: 30px; 


2. $(document).ready(function() { 
现在 的 代码 在 脚本 15-5 中 。 与 以 前 一 样 ， 如 果 和 希望 在 页 面 加 载 时 运行 某 些 代码 ， 就 需要 把 代码 放 
在 这 个 函数 中 。 


脚本 15-5 ”通过 使 用 jQuery， 所 需 的 JavaScript 减少 了 


$(document).ready(function() { 
$("#theMenu").accordion({ 
animated: false, 
autoHeight: false, 
header: ".menuLink" 
D; 
35 


3. $("#theMenu") .accordion({ 

在 脚本 15-3 中 , 通过 一 个 大 纲 构 造 菜单 ,并 用 无 序列 表 项 构造 每 个 菜单 的 内 容 。 这 个 示例 展示 了 
jQuery 的 简单 性 :脚本 15-5 只 需 获 得 顶层 ul 的 id (这 里 是 theMenu ), 然 后 对 它 应 用 内 置 的 accordion() 
方法 。 


4. animated: false, 








autoHeight: false, 
header: ".menuLink" 
我 们 需要 设置 几 个 选项 ， 这 在 accordion() 内 部 进行 。 它 们 如 下 所 示 。 
O animated: 如 果 和 希望 在 显示 菜单 项 时 具有 动画 效果 ,那么 把 这 个 选项 设置 为 所 需 的 效果 名 称 ( 例 
如 ，"slide" 和 "easeslide" ) 。 
口 autoHeight: 迫使 可 折 对 区 域 总 是 具有 固定 的 高 度 ( 基于 所 需 的 最 大 区 域 ) 。 
O header: jQuery 如 何 识别 每 个 菜单 的 标题 ? 在 这 里 ， 所 有 菜单 标题 的 类 都 是 "menuLink"， 单 击 
一 个 标题 ， 就 会 显示 与 图 15-4 相似 的 页 面 。 
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eoo Accordion Menus 
|» | | @ http: //dl.dropbox.com/u/212748¢ & M Qr Google 
Shakespeare's Plays 
» Comedies 
Anthony & Cleopatra 
Hamlet 
Romeo & Juliet 
» Histories 











Ui | 
图 15-4 单 击 一 个 菜单 标题 ， 就 会 打开 一 个 新 的 子 
菜单 (并 关闭 已 经 打开 的 其 他 子 菜单 ) 























V 提示 

O 除了 上 述 选项 之 外 ，accordion() 还 有 其 他 选项 。 这 里 设置 的 选项 只 是 我 们 希望 覆盖 默认 设置 
的 选项 。 如 果 硕 望 当 鼠 标 悬 停 在 菜单 标签 上 时 打开 可 折 受 菜单 C 而 不 是 只 在 用 户 单 击 菜单 标签 
时 打开 ) ， 那 么 只 需 在 最 后 一 步 中 添加 : event: "mouseover" 

口 要 让 折 双 菜单 在 初始 状态 下 是 关闭 的 ， 在 图 15-5 所 示 的 选项 列表 中 添加 active:false。 如 果 
希望 在 页 面 加 载 时 展开 折 和 县 菜单 ， 但 展开 的 不 是 第 一 个 菜单 项 ， 那么 使 用 active:2 (或 者 3， 
或 者 其 他 可 能 的 情况 )。 

口 不 喜欢 Cupertino 主题 ， 想 看 看 还 有 没有 别 的 选择 ? 查看 “选择 主题 ， 任 意 主题 ” 侧 边 栏 。 


eoo Accordion Menus 
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Shakespeare's Plays 


» Comedies 
» Tragedies 
» Histories 
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15.3 ”创建 更 漂亮 的 对 话 杠 


现代 网 站 上 常用 的 另 一 个 设计 元 素 是 对 话 框 ,这 些 对 话 框 并 不 像 第 2 章 讲 述 的 那些 普通 的 prompt()、 
alert() 或 confirm() 对 话 框 。 它 们 更 像 是 在 应 用 程序 中 看 到 的 对 话 杠 ， 比 如 模 态 对 话 框 。 对 于 模 态 对 话 
框 ， 用 户 必须 做 出 响应 ， 然 后 才能 返回 到 网 页 。 同 样 ， 在 jQuery 中 完成 这 个 任务 会 更 简便 。 
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p^ 创建 更 漂亮 的 对 话 框 








1. «link rel="stylesheet"href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/ 
—jquery-ui.css"» 


在 这 里 , 我们 使 用 了 jQuery UI 的 另 一 个 内 置 方案 Redmond。 脚 本 15-6 中 的 这 行 代码 把 它 加 载 到 
页 面 中 。 


脚本 15-6 同样， 只 需 在 这 里 添加 几 个 <script> 标 签 ， 就 能 够 启用 jQuery 


<!DOCTYPE html> 
<html> 
<head> 

<title>Modal Dialog</title> 

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/ 

—jquery-ui.css"> 

<script src-"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"»«/script» 

<script src-"http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"»«/script» 

<script src="script03.js"></script> 
</head> 
<body> 

<div id="example" title="This is a modaldialog"> 

So long as you can see this dialog, <br> 
you can't touch the page below 

</div> 
«hi»Welcome to my page</h1> 
«div id-"bodyText"»Lorem ipsum dolor sitamet, consectetuer adipiscing elit.Nulla viverra aliquet mi. Crasurna. 
—Curabitur diam. Curabitur erosnibh, condimentum eu, tincidunt at,commodo vitae, nisi. Duis nulla lectus, 
—feugiat et, tincidunt nec,iaculis vehicula, tortor. Sed tortor felis, viverra vitae, posuere et,ullamcorper 
—a, leo. Suspendisse euismod libero at orci. Pellentesqueodio massa, condimentum at,pellentesque sed, lacinia 
—quis,mauris. Proin ultricies risus cursusmi. Cras nibh quam, adipiscingvel, tincidunt a, consequat ut,mi. 
—Aenean neque arcu, pretium posuere, tincidunt non, consequat sitamet, enim. Duis fermentum. Donec euaugue. 
—Mauris sit amet ligula.«/div» 
«/body» 
«/html» 


2. $("#example") .dialog({ 
modal: true, 
resizable: false, 
overlay: { 

Opacity: 0.4, 
background: "black" 





b 
我 们 和 希望 在 页 面 上 显示 一 个 可 拖 动 的 模 态 对 话 框 ， 我 们 需要 的 定制 代码 见 脚本 15-7。 当 最 初 加 载 
面 时 运行 这 些 代码 , 它 查 找 example 元 素 并 用 这 个 元 素 作为 对 话 框 的 基础 。 这 个 对 话 框 是 模 态 的 ( 因 
WA modal: true) ， 而 且 不 能 调整 大 小 ( 因为 有 resizable: false) 。 


脚本 15-7 REDE jQuery 代码 即 可 处 理 模 态 对 话 框 


$(document).ready(function() { 
$("#example").dialog({ 
modal: true, 
resizable: false, 
overlay: { 
opacity: 0.4, 
background: "black" 
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b 
buttons: { 
"OK": function() { 
$(this).dialog("close"); 
} 
) ) } ) 3 (& Modal Dialog - Internet Explorer provided by Dell [EET 
3 QUO lg v» didrop.. | & | ++] x je Bing P~ 
还 添加 了 覆盖 (overlay) 。 如 图 15-6 所 示 ， 对 话 a 
框 背后 的 页 面 变 暗 了 , 这 表示 它 是 不 可 访问 的 。 这 是 通 t0 eae 
kt overlay KMM, JtrPEEETCRGSDIBERHS ERE || Welcome to mv page | 
2É EDD Lorem ipsum dolor : SEMEN RENÉ quet mi. Crasuma. | | 
au. ee | So long as you can see this ee Saree | 
uis f? dialo 
3. buttons: 1 eicere Vou Couch the page LIRE UE ] 
bel sium 
"OK": function() { cr MM Ere 
sit amet ligula. | po 
$(this).dialog("close"); po% 
} 
} Done SS ~ 100% = 
文 个 对 话 框 只 有 一 个 按钮 ， 即 OK 按钮 。 当 单 击 这 cc 
图 15-6 ”可 以 在 浏览 器 窗口 中 拖 动 这 个 模 态 对 


个 按钮 时 ,对 话机 





EE 关闭 。 如 果 需 要 更 多 按钮 或 执行 更 多 





操作 ， 应 该 在 这 
V 提示 


口 在 默认 情 


文 里 编写 代码 。 











步骤 2 中 的 resizable: false. 


KE 


EU 


况 下 ， 对 话 框 是 可 调整 大 小 和 可 拖 动 的 。 如 果 需 要 可 调 


话 框 ， 
后 面 的 页 面 








选择 主题 ， 任 意 主题 
截至 目前 位 置 ， 读 者 肯定 意识 到 了 本 书 作 者 并 不 是 专业 的 Web 设计 人 员 。 如 果 恰 好 你 也 一 样 ， 
那 肯 定 会 感谢 jQuery UI 免费 提供 的 大 量 专业 主题 (AULA 15-7). 


也 可 以 这 样 做 。 








整 大 小 的 对 话 框 ， 





晶 是 在 关闭 它 之 前 无 法 访问 它 





14 章 讨论 过 如 何 使 用 Google 的 CDN 来 修改 jQuery 的 JavaScript 文 件 , 可 喜 的 是 ,对 于 jQuery 
UI 的 CSS 文件 ， 


这 次 的 路 径 不 再 是 /jquery/version#/，CSS 4 +/jqueryui/version#/themes/themeName/jQuery-ui.css, 


AP: 


口 version# 是 我 们 希望 使 用 的 jQuery UI 的 版 本 号 (不 是 jQuery 的 版 本 号 ); 
口 themeName 是 不 断 增 加 的 可 用 主题 序号 ( 当前 是 25 )。 在 http://blog.jqueryui.com 上 可 以 找 
到 当前 名 称 和 位 置 列表 。 


对 比 脚本 15-3 和 脚本 15-6 可 以 发 现 ， 要 改变 页 面 风格 ， 


唯一 需要 做 的 就 是 编辑 clink> 标 签 中 


的 主题 名 称 。 这 样 便于 在 不 同 主题 之 间 切 换 ， 所 以 把 所 有 的 主题 都 试 一 下 ， 看 看 喜欢 哪个 吧 。 
Street 和 Vader。 更 不 用 说 本 章 其 他 地 方 使 用 过 的 Cupertino fe Redmond 了 。 而 且 当 然 了 ， 它 们 


看 起 来 颜色 更 


漂亮 ! 
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Buttons: Tabs: 


One Nunc tincidunt 


Proin dolor | Aenean lacinia 
Two | Three | Four 
Proin elit arcu, rutrum commodo, vehlcula tempus, commodo 
à, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet 
mauris. Nam elementum quam ullamcorper ante. Etiam 
aliquet massa et lorem. Mauris dapibus lacus auctor risus. 
Aenean tempor ullamcorper leo. 


Date Picker: Accordion 


o May 2011 


Su Mo Tu We Th Fr Sa 


o Section 1 


Mauris mauris ante, blandit et, ultrices a, suscipit eget, 
quam. Integer ut neque. Vivamus nisi metus, molestie vel, 
gravida in, condimentum sit amet, nunc. Nam a nibh. 
Donec suscipit eros. Nam ml. Proin viverra leo ut odio. 
Curabitur malesuada. Vestibulum a velit eu ante 
scelerisque vulputate. 


29 30/31 
> Section 2 
> Section 3 

Buttons: Tabs: 


on I ——[——] 
ve ESE e 





Pron elt arca. rutrum commodo, vehicula tempus, commodo à risus 
Curabeur nec arcu Donec solkoruan mi ut amet maurs Nam elementum. 
quam ullamcorper ate. Eram aguet massa et lorem. Maurs dapibus Bat 
Suctor raus. Aenean tempor ulamcorper e 


Date Picker: Accordion 


OD 


Su Mo Tu We Th Fr Sa 














TELS fh es te rns 
sa Een sa En Di o Fa 
B e 
RET 
EY 
Buttons: Tabs: 
€3 ——X" Io 
= = 
Date Picker: Accordion 


May 2011 


Mo Tu We petu 
mauris ante, blandit et, ultrices a, suscipit eget, 
r ut neque. Vivamus nisi me 
gravida in, condimentum sit amet, nun 
viverra leo 


molestie ve 
nibh. Done 
Curabitur 
ie vulputate. 


Section 3 





Buttons: 


EE Three 


Tabs: 


Nune tincidunt MENÉ 





Proin eft arcu, rutrum commodo, vehicula tempus, commodo a, 
rus. Curabitur nec arcu. Donec soRctud m st amet mauri. Nam 
elementum quam ulamcorper ante. Etiam aiquet massa et lorem. 

Maura dapibus lacus auctor risus. Aenean tempor ulamcorper leo. 





Date Picker: Accordion 


O mym 0 | -seaom 


Mauris maurs ante, blandit at, utrices a, suscipit eget, quam 
Integer ut neque. Vivamus nisi metus, moleste vel, gravida in, 


3 
| 20] 21] 
E 





Nam mi. Proin vivera leo ut odio. Curabitur malesuada. 
Vestibulum a velt eu ante scelerisque vulputate, 


Buttons: 


Tabs: 





Date Picker: 


May 2011 


Buttons: 


One 


Two | Three | Four 


Date Picker: 





Accordion 


Section 1 








Nunc tincidunt. | Proin dolor 





Proin elit arcu, rutrum commodo, vehicula tempus, commodo 
a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet 
mauris. Nam elementum quam ullamcorper ante. Etiam 
aliquet massa et lorem. Mauris dapibus lacus auctor risus. 
Aenean tempor ullamcorper leo. 


Accordion 


Su Mo Tu We Th Fr Sa 


Jesse 
s| 9/10) 11) 12) 13 
15| 16| 17 18| 19| 20 
22 23|24| 25| 26) 27 


29| 30/31 


Date Picker: 


o May 2011 

Su Mo Tu We Th Fr 
S 2] 3] 4] os] e 
3) 9) 10) | 12) 13 
15) 16) 17) 18) 19) 20 
22, 23| 24| 25) 26) 27 
2 30 31 


Mauris mauris ante, blandit et, ultrices a, suscipit eget, 


7 quam. Integer ut neque. Vivamus nisi metus, molestie vel, 
gravida in, condimentum sit amet, nunc. Nam a nibh. 
24] Donec suscipit eros. Nam ml. Proin viverra leo ut odio. 
a Curabitur malesuada. Vestibulum a velit eu ante 
scelerisque vulputate. 
28 
» Section 2 
» Section 3 
Tabs: 





olor | Aenean lacinia 


Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. 
Curabitur nec arcu. Donec sollicitudin mi sit amet mauris, Nam 
lementum quam ullamcorper ante. Etiam aliquet massa et lorem. 
Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. 


Accordion 


Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. 
Integer ut neque. Vivamus nisi metus, molestie vl, gravid 
‘condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam. 
mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a 
velit eu ante scelerisque vulputate. 








Date Picker: 


We m 








图 15-7 可 选 的 主题 有 很 多 : Base, Dark Hive, Hot Sneaks, Humanity, Le Frog, Overcast, South 
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15.4 条 纹 表格 


如 果 你 的 网 站 有 大 量 表格 数据 ， 就 应 该 在 表格 中 添加 条 纹 一 一 如 果 没有 条 纹 ， 就 很 难 阅读 和 理解 
这 些 信息 。 遗憾 的 是 , 还 没有 适用 于 所 有 常用 浏览 器 的 方法 ,可 以 通过 CSS 来 实现 条 纹 表格 行 。 在 过 
去 ,使 用 JavaScript 实现 条 纹 表格 行 非常 困难 ， 大 多 数 人 不 愿意 自 找 麻烦 。 但 是 ， 通 过 使 用 jQuery, 
这 就 简单 多 了 ， 而 且 效 果 很 好 ， 见 图 15-8。 









































(8) Striped Tables - Mozilla Firefox [EET 

File Edit View History Bookmarks Tools Help - 

B- e fiy (L] htp//didror vy -| 最- co | Ge 
|. | Striped Tables | + 

Beatles Discography 
Pum | Vear | Label | 
Please Please Me 1963 Parlophone 

With The Beatles 1963 Parlophone 

A Hard Day's Night 1964 Parlophone 
Beatles for Sale 1964 Parlophone 
Help! 1965 Parlophone 
Rubber Soul 1965 Parlophone 
Revolver 1966 Parlophone 

Sgt. Pepper's Lonely Hearts Club Band 1967 Parlophone 
Magical Mystery Tour 1967 Capitol 

The Beatles 1968 Apple 

Yellow Submarine 1969 Apple 

Abbey Road 1969 Apple 

Let It Be 1970 Apple 

Done 




















图 15-8 ”这 个 专辑 列表 具有 交错 的 背景 ， 因 此 很 容易 阅读 


=> 创建 斑马 纹 表格 


1. $("tr").mouseover(function() { 
$(this).addClass("over"); 
35 
脚本 15-8 (HTML 文件 ) 和 脚本 15-9 (CSS 文件 ) 没什么 特殊 之 处 。 唯 一 有 点 古怪 的 地 方 是 ， 
CSS 文件 为 具有 "over" 和 "even" 类 的 表格 行 设置 了 规则 , 但 是 在 HTML 中 没有 设置 这 些 类 ， 因 为 这 项 
工作 是 在 JavaScript 文件 ( 见 脚 本 15-10 ) 中 完成 的 。 


脚本 15-8 ”这 是 标准 表格 的 HIML ， 没 有 任何 内 联 样式 或 内 联 脚 本 


«IDOCTYPE html» 
«html» 
«head» 
<title>Striped Tables</title> 
<link rel="stylesheet"href="script04.css"> 
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<script src-"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"»«/script» 


<script src="script04.js"></script> 
</head> 
<body> 
<hi>Beatles Discography</h1> 
<table> 
<thead> 
<tr> 
<th>Album</th> 
<th>Year</th> 
<th>Label</th> 
</tr> 
</thead> 
<tr> 
<td>Please Please Me</td> 
<td>1963</td> 
<td>Parlophone</td> 
</tr> 
<tr> 
«td»With The Beatles</td> 
«td»1963«/td» 
«td»Parlophone«/td» 
</tr> 
<tr> 
<td>A Hard Day's Night</td> 
<td>1964</td> 
<td>Parlophone</td> 
</tr> 
<tr> 
<td>Beatles for Sale</td> 
<td>1964</td> 
<td>Parlophone</td> 
</tr> 
<tr> 
<td>Help!</td> 
<td>1965</td> 
<td>Parlophone</td> 
</tr> 
<tr> 
<td>Rubber Soul</td> 
<td>1965</td> 
<td>Parlophone</td> 
</tr> 
<tr> 
<td>Revolver</td> 
<td>1966</td> 
<td>Parlophone</td> 
</tr> 
<tr> 
<td>Sgt. Pepper's Lonely Hearts Club Band</td> 
<td>1967</td> 
<td>Parlophone</td> 
</tr> 
<tr> 
<td>Magical Mystery Tour</td> 
<td>1967</td> 
<td>Capitol</td> 
</tr> 
<tr> 
<td>The Beatles</td> 
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<td>1968</td> 
<td>Apple</td> 

</tr> 

<tr> 
<td>Yellow Submarine</td> 
<td>1969</td> 
<td>Apple</td> 

</tr> 

<tr> 
<td>Abbey Road</td> 
<td>1969</td> 
<td>Apple</td> 

</tr> 

<tr> 
<td>Let It Be</td> 
<td>1970</td> 
<td>Apple</td> 

</tr> 

</table> 
</body> 
</html> 


脚本 15-9 将 通过 jQuery 启用 这 些 CSS 代码 


table { 
border-collapse: collapse; 


tr.even { 
background-color: #C2C8D4; 


tr.over { 
background-color: #8797B7; 


td { 
border-bottom: 1px solid #C2C8D4; 
padding: 5px; 


th { 
border-right: 2px solid #FFF; 
color: #FFF; 
padding-right: 40px; 
padding-left: 20px; 
background-color: #626975; 

} 


th.sortUp { 
background: #626975 url(jquery/images/asc.gif) no-repeat right center; 


th.sortDown { 
background: #626975 url(jquery/images/desc.gif) no-repeat right center; 


脚本 15-10 ”这 是 在 表格 中 添加 条 纹 所 需 的 所 有 代码 


$(document).ready(function() { 
$("tr").mouseover(function() { 
$(this).addClass("over"); 
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$("tr").mouseout(function() { 
$(this).removeClass("over"); 


E 
$("tr:even") .addClass("even"); 
这 部 分 代码 起 到 翻转 器 的 作用 : 当 鼠 标 移动 到 某 一 行 上 时 , 触发 tr 的 mouseover, iXib jQuery 在 
此 行 中 添加 "over" 类 ， 而 CSS 文件 告诉 浏览 顺应 该 以 另 一 种 颜色 显示 此 行 ( 见 图 15-9 ) 。 


























Beatles Discography 

Please Please Me 1963 Parlophone 
With The Beatles 1963 Parlophone 
A Hard Day's Night 1964 Parlophone 
Beatles for Sale 1964 Parlophone 
Help! 1965 Parlophone 
Revolver 1966 Parlophone 
Sgt. Pepper's Lonely Hearts Club Band 1967 Parlophone 
Magical Mystery Tour 1967 Capitol 
The Beatles 1968 Apple 
Yellow Submarine 1969 Apple 
Abbey Road 1969 Apple 

Let It Be 1970 Apple 








图 15-9 JERE RIT T E, SEAT NTT 


2. $("tr").mouseout(function() ( 
$(this).removeClass("over"); 
35 
这 些 代码 的 作用 与 前 面 的 相反 : 当 鼠 标 离开 该 行 时 ， 触 发 它 的 mouseout， 删 除 类 属性 "over"。 
3. $("tr:even").addClass("even") ; 
实际 上 , 这 就 是 添加 斑马 纹 所 需 的 所 有 代码 。 因 为 jQuery 理解 奇数 行 和 偶数 行 的 概念 , 所 以 可 以 
让 它 把 所 有 偶数 行 的 类 属性 设置 为 "even"。 又 因为 CSS 中 包含 应 用 于 tr.even 的 规则 ， 所 以 会 自动 设 
置 偶数 行 的 颜色 ， 我 们 根本 不 需要 修改 HTML. 
V 提示 
口 注意 ,创建 这 个 功能 并 不 需要 特殊 的 jQuery 例 程 ， 甚 至 不 需要 jquery-uijs。 需 要 加 载 的 唯一 
脚本 是 jquery.js， 而 在 使 用 jQuery 时 总 是 需要 加 载 这 个 脚本 。 5 


15.5 ”表格 排序 


具有 条 纹 效果 的 表格 已 经 很 不 错 了 , 但 是 有 时 候 你 希望 站 点 支持 用 户 交 互 。 用 户 可 能 希望 按照 不 同 
的 次 序 对 列 进行 排序 一 一 不 是 按照 年 份 升序 , 而 是 按照 降序 排序 。 也 可 能 希望 按 名 称 或 名 称 的 反 序 排序 。 
jQuery 本 身 并 没有 提供 这 种 功能 ， 所 以 必须 使 用 插件 。 这 个 插件 称 为 tablesorter。 
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> 创建 可 排序 表格 








1. «script src-"jquery/jquery.tablesorter.js"»«/script» 
脚本 15-11 (HTML 文件 ) 几 乎 与 脚本 15-8 相同 , 只 有 两 处 改动 : 加 载 另 一 个 脚本 jquery.tablesorter.js, 
在 表格 中 添加 id 值 为 theTable 的 元 素 。 


脚本 15-11 为 了 给 表格 添加 排序 功能 ， 只 需 在 HTML 中 添加 少量 代码 


<!DOCTYPE html» 
<htm]> 
<head> 
<title>Sorted Tables</title> 
<link rel="stylesheet" href="script04.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
<script src="jquery/jquery.tablesorter.js"></script> 
<script src="script05.js"></script> 
</head> 
<body> 
«hi»Beatles Discography</h1> 
«table id="theTable"> 
<thead> 
<tr> 
<th>Album</th> 
<th>Year</th> 
<th>Label</th> 
</tr> 
</thead> 
<tr> 
<td>Please Please Me</td> 
<td>1963</td> 
<td>Parlophone</td> 
</tr> 
<tr> 
«td»With The Beatles</td> 
«td»1963«/td» 
«td»Parlophone«/td» 
</tr> 
«tr» 
«td»A Hard Day's Night«/td» 
«td»1964«/td» 
«td»Parlophone«/td» 
</tr> 
«tr» 
«td»Beatles for Sale«/td» 
«td»1964«/td» 
«td»Parlophone«/td» 
</tr> 
<tr> 
<td>Help!</td> 
<td>1965</td> 
<td>Parlophone</td> 
</tr> 
«tr» 
<td>Rubber Soul</td> 
<td>1965</td> 
<td>Parlophone</td> 
</tr> 
«tr» 
«td»Revolver«/td» 
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<td>1966</td> 
<td>Parlophone</td> 

</tr> 

<tr> 
<td>Sgt. Pepper's Lonely Hearts Club Band</td> 
<td>1967</td> 
<td>Parlophone</td> 

</tr> 

<tr> 
<td>Magical Mystery Tour</td> 
<td>1967</td> 
<td>Capitol</td> 

</tr> 

<tr> 
<td>The Beatles</td> 
<td>1968</td> 
<td>Apple</td> 

</tr> 

<tr> 
<td>Yellow Submarine</td> 
<td>1969</td> 
<td>Apple</td> 

</tr> 

<tr> 
<td>Abbey Road</td> 
<td>1969</td> 
<td>Apple</td> 

</tr> 

<tr> 
<td>Let It Be</td> 
<td>1970</td> 
<td>Apple</td> 

</tr> 

</table> 
</body> 
</html> 


2. th.sortUp { 
background: #626975 url(jquery/ images/asc.gif) no-repeat right center; 


th.sortDown { 
background: #626975 url(jquery/ images/desc.gif) no-repeat right center; 


让 我 们 快速 回顾 一 下 脚本 15-9， 之 前 我 们 跳 过 了 这 两 条 规则 。 这 里 ,它们 可 以 起 作用 了 。 它 们 告 
诉 浏览 器 不 论 用 户 要 升序 还 是 降序 ， 我 们 都 希望 表 头 能 显示 一 个 合适 朝向 的 箭头 。 

3. $("#theTable").tablesorter({ 

这 是 对 JavaScript 代码 ( 见 脚本 15-12 ) 的 主要 修改 : 告诉 jQuery, 我 们 希望 让 用 户 能 够 对 这 个 表 
格 的 内 容 排序 。 这 由 步骤 3 和 步骤 4 实现 。 我 们 选择 id 为 theTable 的 元 素 〈 见 步骤 1) 并 对 它 运行 
tablesorter() 方 法 。 


脚本 15-12 最 后 ， 只 需 添加 儿 行 代码 ， 表 格 就 会 具备 排序 功能 和 条 纹 效 果 


$(document).ready(function() { 
$("tr").mouseover(function() { 
$(this).addClass("over"); 
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) 


$("tr").mouseout(function() ( 
$(this).removeClass("over"); 


) 


$("#theTable").tablesorter({ 
sortList:[[1,0]], 
cssAsc: "sortUp", 
cssDesc: "sortDown", 
widgets: ["zebra"] 


5 


) 


4. sortList:[[1,0]], 


cssAsc: "sortUp", 
cssDesc: "sortDown", 
widgets: ["zebra"] 





这 里 使 用 jQuery， 所 以 有 几 个 控制 表格 显示 方式 的 选项 。 我 们 在 这 里 使 用 的 选项 如 下 所 示 。 


口 sortList:[[1,0]]: 








这 里 定义 这 种 排序 方式 。 所 需 排 





在 最 初 加 载 页 面 时 ， 我 们 希望 表格 以 某 种 方式 排序 ( 见 图 
序 的 列 是 第 一 个 参数 , 列 的 编号 从 零 开始 。 在 这 里 
表格 按照 第 二 列 排序 ， 所 以 传递 1 RWIE, JavaScript 的 编号 是 从 零 开 始 的 ) 。 

















就 在 
， 我 们 希望 
第 二 个 参数 是 


15-10) , 





希望 的 排序 方向 : 0 是 升序 ，1 是 降序 。 
Beatles Discography 
SS Se 
Please Please Me 1963 
With The Beatles 1963 Parlophone 
A Hard Day's Night 1964 Parlophone 
Beatles for Sale 1964 Parlophone 
Help! 1965 Parlophone 
Rubber Soul 1965 Parlophone 
Revolver 1966 Parlophone 
Sgt. Pepper's Lonely Hearts Club Band 1967 Parlophone 
Magical Mystery Tour 1967 Capitol 
The Beatles 1968 Apple 
Yellow Submarine 1969 Apple 
Abbey Road 1969 Apple 
Let It Be 1970 Apple 

图 15-10 ”在 最 初 加 载 这 个 可 排序 表格 时 ， 它 按照 年 份 升序 排序 一 一 


Year 标签 右边 的 向 上 箭头 向 


"sortUp": 当 用户 选 择 升 序 排序 时 ， 我 们 要 对 这 个 th 单元 格 应 月 
这 个 选项 会 在 用 户 选 择 升 序 时 自动 分 配 "sortup" 类 ， 因 此 会 在 标签 的 右边 显示 向 上 箭头 。 

: 如 果 用 户 希 望 采用 降序 排序 ， 可 以 再 次 单 击 这 个 th 单元 格 ， 这 时 类 会 
因此 在 标签 的 右边 显示 向 下 箭头 (WE 15-11) 。 


L] cssAsc: 








口 cssDesc: "sortDown" 


WE" sortDown" , 




















] 户 指出 了 这 一 点 


一 个 新 的 CSS 规则 。 








因为 希望 能 够 按照 任何 列 
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排序 而 不 只 是 按照 Web 开发 人 员 决 定 的 列 排序 ， 所 以 用 户 只 需 单 击 男 一 个 th 单元 格 , 结果 会 
立即 改变 ( 见 图 15-12 ) ， 不 需要 添加 任何 代码 。 

O widgets: ["zebra"]: 在 使 用 tablesorter() 时 ， 斑 马 纹 效果 是 一 个 “免费 赠送 的 ”部 件 。 只 需 
指出 希望 添加 zebra 部 件 ， 就 能 够 产生 条 纹 效果 。 

















Beatles Discography Beatles Discography 
Lim | er | Label Abun 
Let It Be 1970 Apple A Hard Day's Night 1964 Parlophone 
Yellow Submarine 1969 Apple Abbey Road 1969 Apple 
Abbey Road 1969 Apple Beatles for Sale 1964 Parlophone 
The Beatles 1968 Apple Help! 1965 Parlophone 
Sgt. Pepper's Lonely Hearts Club Band 1967 Parlophone Let It Be 1970 Apple 
Magical Mystery Tour 1967 Capitol Magical Mystery Tour 1967 Capitol 
Revolver 1966 Parlophone Please Please Me 1963 Parlophone 
Help! 1965 Parlophone Revolver 1966 Parlophone 
Rubber Soul 1965 Parlophone Rubber Soul 1965 Parlophone 
A Hard Day's Night 1964 Parlophone Sgt. Pepper's Lonely Hearts Club Band 1967 Parlophone 
Beatles for Sale 1964 Parlophone The Beatles 1968 Apple 
Please Please Me 1963 Parlophone With The Beatles 1963 Parlophone 
With The Beatles 1963 Parlophone Yellow Submarine 1969 Apple 

















Kl 15-11 Hii Year 标签 ,表格 就 会 按照 降序 图 15-12 单 击 其 他 标签 ( 比如 Album) ， 那 么 
重新 排序 ， 箭 头 也 会 变 成 向 下 的 此 列 就 会 成 为 排序 字段 








V 提示 
O 对 于 jQuery UI 来 说 ， 本 章 只 是 对 其 中 主要 功能 的 入 门 介绍 。 更 详细 的 内 容 请 参考 http://jqueryui.com。 








基于 jQuery 的 应 用 








在 
E 多 多 代码 来 为 网 站 添加 复杂 功能 。 
比 自己 编码 实现 这 些 函 数 要 容易 得 多 。 
上 一 章 中 , 我 们 讨论 了 jQuery 的 用 户 界 面 工具 
如 荣 单 、 按 钮 、 对 话 框 和 进度 条 等 ， 这 些 功能 都 是 
会 向 你 介绍 如 何在 自己 的 网 站 中 使 用 及 定制 这 些 主 
ET eum 
































两 章 中 ， 你 已 经 了 解 了 如 何 利用 现 有 的 HTML 和 CSS 知识 ， 通 过 jQuery 库 编 写 尽 量 
通常 情况 下 ， 使 用 jQuery 在 网 站 中 添加 JavaScript 函数 





包 , 借助 于 它 , 你 能 够 轻松 地 为 网 站 添加 一 些 功能 ， 
Mac OS X 和 Windows 系统 用 户 的 常用 功能 。 本 章 


日 
题 。 


i 上 的 改进 , jQuery 库 还 为 向 网 站 添加 各 种 功能 打下 了 基础 。 举 两 个 这 方面 的 例子 : 





基于 jQuery， 你 能 够 使 用 Ajax, JSON RAWEA 


而 有 之 的 方式 来 访问 服务 右上 的 远程 数据 ; 利用 











jQuery 插件 ,你 可 以 为 jQuery 赋予 全 新 的 功能 ， 进 而 为 网 站 添加 这 些 全 新 的 功能 。 下 鸡 


手 实践 吧 ! 


16.1 以 jQuery 为 基础 


引入 jQuery 的 最 大 收获 之 一 是 你 能 


TE EL CLA DUI d E PRAE PPE TH ET AS TD 





j, RXZ 











D 











x 





而 言 ， 其 使 用 JavaScript 的 方式 不 尽 相 同 ， 因 此 ， 
以 应 对 不 同 浏览 器 的 特质 。 使 用 jQuery 时 ,兼容 
览 器 的 通用 函数 集 。jQuery 库 充分 考虑 了 浏览 器 
性 问题 了 。 














可 以 更 好 地 控 





基于 jQuery， 使 用 包括 类 名 和 id 在 内 的 CSS 选择 器 ， 你 能 
BLUE, ， 因 为 jQuery 赋予 了 你 随时 创建 或 删除 HTML 元 素 的 能 


手写 JavaScript 代码 时 往往 需要 编写 额外 的 代码 
性 问题 将 不 复 存 在 ,因为 jQuery 提供 了 一 套 跨 浏 


间 的 差异 ， 而 作为 开发 者 的 你 则 不 必 再 考虑 兼容 




















够 访问 并 操作 页 面 上 的 任意 元 素 。 你 




















jQuery 库 加 载 于 页 面 上 其 他 元 素 之 前 
是 在 body 元 素 中 )， 因 此 ， 待 操作 的 元 素 一 准备 好 
使 用 浏览 器 的 onload 函数 一 一 只 有 当 页 面 上 包括 


























因为 它 是 在 页 面 上 的 head 部 分 中 调用 的 ， 而 其 他 元 素 则 


， 库 就 能 立即 运行 与 之 相关 的 代码 。 这 种 方式 优 于 


图 片 在 内 的 所 有 元 素 都 加 载 完毕 时 ，onload 函数 才 











会 被 调用 。jQuery 的 方式 对 用 户 而 言 ， 其 好 处 是 页 
1. Ajax. JSON 和 jQuery 
jQuery 库 包含 了 一 系列 丰富 的 用 于 页 面 与 后 台 
们 可 以 获取 更 多 的 数据 而 无 需 刷 新 页 面 。 
不 刷新 页 面 

















获取 数据 的 好 处 在 于 它 让 基于 Web 


面 能 够 更 快 响应 它们 的 行为 。 














E 


月 














民 务 需 交 互 的 Ajax 函数 。 通 过 这 些 Ajax PARK, 





的 应 用 程序 可 以 像 桌面 应 用 程序 那样 快速 响应 。 从 
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服务 器 接收 到 了 更 新 过 的 数据 以 后 , 你 可 以 借助 jQuery 来 更 新 页 面 元 素 , 且 不 会 出 现 页 面 刷新 时 的 那 
种 明显 闪烁 。 

正如 前 面 章节 中 所 介绍 的 ， 使 用 JavaScript 和 XMLHttpRequest 对 象 完全 可 以 自己 编写 Ajax 请 求 。 
首先 , 你 需要 把 准备 发 往 服务 器 的 数据 加 载 到 对 象 中 , 然后 , 构建 另 一 个 函数 来 接收 服务 器 端的 响应 。 
同时 ， 你 还 需要 错误 检测 代码 以 确保 服务 器 端的 响应 是 正确 而 有 意义 的 。 如 果 不 想 编 写 上 述 代码 ， 你 
仅 需 使 用 jQuery 函数 $.ajax() 即 可 处 理 整个 过 程 。 

与 之 类 似 , jQuery 还 提供 了 $.get]JSON() 函 数 ， 有 了 它 ， 你 能 够 轻松 访问 和 操作 接收 到 的 ISON 格 
式 的 数据 。 

2. jQuery 插件 

jQuery 核心 库 包 含 了 大 量 的 内 置 功能 ， 尽管 如 此 ， 开 发 人 员 可 以 轻易 地 将 新 功能 添加 为 插件 ， 进 
而 为 网 站 创建 一 套 几 乎 无 限制 的 功能 集 。 目 前 ， 有 数 以 百 计 的 插件 可 供 免费 下 载 ， 它 们 在 不 同 的 领域 
扩展 了 jQuery 的 功能 ， 如 动画 效果 、 拖 放 页 面 元 素 、 改 变 页 面 布局 、 处 理 不 同 的 媒体 类 型 BRE OT I 
导航 、 添 加 有 用 的 部 件 等 。 

在 你 喜爱 的 Web 搜索 引擎 中 简单 搜索 一 下 ， 即 可 找到 丰富 的 可 供 选 择 的 jQuery 插件 。 或 者 ， 你 
也 可 以 先 在 http://plugins.jquery.com 中 搜索 插件 。 


16.2 ”使 用 ThemeRoller 定制 外 观 


作为 Web 开发 人 员 , 你 需要 与 设计 师 一 起 为 网 站 创建 统一 的 外 观 。 令 人 高 兴 的 是 , jQuery 的 作者 
明白 仅 为 网 站 添加 功能 是 不 够 的 , 还 必须 考虑 这 些 功 能 对 网 站 观感 的 影响 。 而 这 正 是 创建 ThemeRoller 
的 原因 。 作 为 一 个 工具 , ThemeRoller 允许 用 户 根据 项 目 需要 来 定制 jQuery 的 用 户 界面 主题 , 如 图 16-1 
所 示 。 你 可 以 新 建 一 个 完全 自 定 义 的 主题 ， 也 可 以 修改 任意 预先 设计 好 的 主题 。 要 了 解 ThemeRoller 
可 以 从 访问 http://jquery.ui.com/themeroller 开始 。 


> 创建 自 定义 主题 
































































































































1. 创建 自 定 义 主 题 的 最 简单 的 方式 莫 过 于 以 现 有 jQuery 主题 中 的 某 一 个 为 基础 。 单 击 左 侧 边栏 
中 的 Gallery， 查 看 你 的 选择 ， 如 图 16-1 所 示 。 

2. 查看 可 用 主题 ， 找 到 与 期 望 外 观 最 相近 的 主题 。 单 击 主题 右 下 方 的 Edit 按钮 。 随 后 ， 左 侧 边 
栏 会 切换 至 Roll Your Own 面板 ， 如 图 16-2 所 示 。 

3. 此 时 ， 你 可 以 选择 面板 上 的 可 折 和 县 菜单 项 ， 单 击 后 会 出 现 相应 项 的 设置 ， 如 图 16-3 所 示 。 

4. 编辑 侧 边栏 中 的 值 时 ,页面 的 主体 部 分 会 进行 相应 的 更 新 匹配 ， 你 可 以 立即 看 到 (并 判断 ) 其 
差异 。 

5. 如 果 你 对 结果 满意 , 单 击 面板 上 方 的 Download Theme 按钮 ,页 面 会 跳 转 至 Build Your Download 
页 面 ， 如 图 16-4 所 示 。 

6. 在 这 个 页 面 上 ， 你 能 够 控制 CSS 的 “ 轻 ” 与 “ 重 ”。 如 果 你 选择 全 部 组 件 ， 那 么 相 比 于 选择 最 
小 集 ， 你 的 页 面 会 在 下 载 和 呈现 上 花费 更 长 的 时 间 。 那 就 是 说 ， 如 果 你 知道 自己 的 网 站 永远 不 会 用 到 
Shake 或 Pulsate 效果 ( 晃动 或 跳动 效果 )， 只 要 不 勾 选 它们 前 面 的 复 选 框 ， 它 们 就 不 会 被 包含 在 下 载 
范围 之 内 。 
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‘ane jQuery Ul - ThemeRoller 
http: //jqueryul.com/themercller/#ifDefault=Seqoe + UIKZC s ArialsaC sa 
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Roll Your Own | Gallery Help 


Download theme 
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图 16-1 通常 情况 下 , 在 ThemeRoller 中 定制 主题 的 ”图 16-2 Ért Roll Your Own 选项 卡 , 会 显示 出 更 多 
最 佳 办 法 是 从 Gallery 选项 卡 下 选 出 一 个 现 可 用 的 定制 选项 
有 主题 ， 在 其 基础 上 进行 自 定义 
ThemeRoller ep S Build Your Download 
nna * 
| choice 3 | 
2€ ous, 
E 3014/79) ud 
X TEE BERE e 
Ut enim ad minim veniam, quis nostrud NUNG En Droppable 
exercitation ullamco laboris nisi ut aliquip ex 丁丁 四 丁丁 丁丁 ^ Macias 
ea commodo consequat. | x9] 20| 21] 22| 23] 2a] 25] dune 
图 16-3 ”在 Roll Your Own 选项 卡 中 更 改 类 别 时 ,Theme- [8116-4 在 ThemeRoller 中 单 击 Download Theme f% 
Roller 会 在 屏幕 右 侧 为 你 提供 实时 预览 。 此 钮 后 ， 页 面 会 跳 转 至 Build Your Download 
例 中 , 我 们 将 字体 粗细 程度 加 强 为 Bold, 将 页 面 。 在 这 里 , 你 可 以 进一步 定制 所 需 构建 
字号 从 1.1em 增加 到 1.Sem， 并 设置 标题 / 和 下 载 的 组 件 。 当 定制 项 符合 你 的 需求 时 ， 
TA (Header/Toolbar ) 的 背景 图 案 为 斜 单 击 Download 按钮 进行 下 载 





纹 平行 图 案 。 这 样 一 来 ,在 Tabs 和 Datepicker 
两 个 部 件 中 ， 你 会 看 得 更 加 清晰 


7. 选 定 了 所 需 的 全 部 内 容 后 , 单 击 Download 按钮 。 最终, 你 会 获得 一 个 jQuery 相关 的 下 载 文件 
K, 在 其 根 目 录 下 ， 有 一 个 名 为 index.html 的 文件 。 在 浏览 器 中 打开 index.html, 它 会 精确 显示 出 你 所 
下 载 的 内 容 ， 此 外 ， 它 还 会 指导 你 如 何 将 新 主题 添加 到 网 站 页 面 中 。 
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v 提示 
口 如 果 使 用 自 定 义 主题 ， 要 确保 页 面 中 引用 的 是 刚刚 下 载 的 文件 而 非 Google 的 CDN。 当 然 , 要 
记得 将 它们 上 传 到 你 的 服务 器 上 ! 


16.3 在 页 面 中 添加 日 历 


许多 Web 应 用 程序 都 需要 一 个 用 户 能 够 参考 与 交互 的 日 历 , 如 预约 表单 、 待 办 清单 、 博 客 上 的 
博文 导航 等 。 jQuery 库 包 含 了 一 个 好 用 且 易 于 实现 的 日 历 控件 ,如 图 16-5 所 示 。 最 棒 的 是 它 非 常 灵 
活 , 编写 寥寥 几 行 代码 即 可 改变 它 的 外 观 和 功能 。 下 面 给 出 一 个 交互 式 单 日 历 ( 一 次 仅 显 示 一 个 月 ) 
的 示例 。 



































@ jQuery Date Picker: 1 up - Mozilla Firefox Lo) ea) 


File Edit View History Bookmarks Tools Help 
ec x Oma [a «rg 


|. j jQuery Date Picker: 1 up | +| 





Date: 


August 2011 


We Th 





Done 























图 16-5 ”第 一 次 打开 页 面 时 ，datepicker 部 件 显 示 在 所 选择 主题 中 


> 添加 单 日 历 


1. <h2>Date: <span id="datepicked"></span></h2> 








<div id="datepicker"></div> 


脚本 16-1 列 出 了 HTML 页 面 代 码 ， 它 需要 支持 jQuery 日 历 控件 。 


脚本 16-1 日 历 示例 的 HTML 页 面 。 请 注意 ， 我 们 指向 的 是 Google 上 的 jQuery 副本 


<!DOCTYPE html> 

<html> 

<head> 
<title>jQuery Date Picker: 1 up</title> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-darkness/ 
—jquery-ui.css"» 
«script src-"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"»«/script» 
«script src-"http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"»«/script» 
«script src="script02.js"></script> 

«/head» 

«body» 
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<h2>Date: <span id="datepicked"></span></h2> 
<div id="datepicker"></div> 

</body> 

</html> 


2. $("#datepicker") .datepicker({ 
HTML 代码 中 有 一 个 id 值 为 datepicker AY div, 在 脚本 16-2 所 示 的 JavaScript 代码 行 中 , 我 们 将 
jQuery UI 的 datepicker 部 件 绑 定 在 了 上 再 


脚本 16-2 这 个 JavaScript 文件 调用 了 jQuery， 并 设置 了 用 户 单 击 日 历 后 显示 日 期 所 需 的 参数 


$(function() { 
$("#datepicker").datepicker({ 
dateFormat: 'DD, MM dd, yy', 
onSelect: function(selectedDate) { 
$("itdatepicked").empty() .append(selectedDate) ; 











o 





5 
5 


3. dateFormat: 'DD, MM dd, yy', 

我 们 准备 在 页 面 上 以 特定 的 形式 显示 日 期 , 此 处 , 我 们 要 通知 jQuery 以 何 种 方式 显示 日 期 : 首先 
是 星期 ， 接 着 是 完整 的 月 份 名 称 ， 再 下 来 是 具体 一 个 月 中 的 哪 一 天 ， 最 后 是 四 位 数 的 年 份 。 

4. onSelect: function(selectedDate) { 

页 面 上 的 日 期 部 件 会 自动 弹出 ， 选 中 某 个 日 期 时 ，jQuery FARAY onSelect 会 被 触发 。 

5. $("itdatepicked").empty().append (selectedDate) ; 

选中 日 期 时 ， 我 们 想 要 更 新 页 面 上 的 显示 ， 这 行 代码 正 是 用 来 做 这 件 事情 的 。 我 们 会 更 新 id 值 
为 datepicked 的 span 标签 ,首先 清空 当前 值 ( 如 果 存 在 的 话 ), 然后 将 selectedDate 写 信 其中， 如 图 
16-6 所 示 。 
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Date: Sunday, August 07, 2011 


August 2011 


Mo Tu We Th 
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21 





28 




















图 16-6 用 鼠标 选中 了 日 期 以 后 , 被 选中 的 日 期 会 在 日 历 中 突出 显示 。 本 例 中 ,我 们 额 
外 添加 了 在 日 历 上 方 显示 日 期 的 代码 











V 提示 
口 看 起 来 可 能 有 点 奇怪 ,但 是 结果 正确 ，yy 会 返回 四 位 数 的 年 份 。 如 果 要 显示 两 位 数 的 年 份 ， 
HHEH y KEM yy。 
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在 页 面 上 添加 双 联 日 历 
> 添加 双 联 日 历 


有 时 ， 你 只 需要 一 个 日 历 ， 如 约会 、 预 订餐 厅 等 。 不 过 ， 双 联 日 历 也 很 常见 。 它 们 通常 会 被 用 于 
那些 起 止 日 期 不 同 的 事件 。 例 如 ， 预 订 酒 店 和 购买 机 票 的 时 候 ， 你 常会 见 到 它们 。 
1. «label for="from">From</label> 
<input type="text" id="from"name="from"> 
<label for="to">to</label> 
<input type="text" id="to" name="to"> 
上 述 代 码 是 实现 功能 所 需 的 HTML 代码 的 最 小 集 ， 将 其 添加 到 脚本 16-3 所 示 的 Web 页 面 中 ， 如 
Al 16-7 Brzn o 
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图 16-7 在 datepicker 部 件 的 其 他 双 联 形式 中 , 页 面 会 先 显示 两 个 日 期 字段 。 用 Tab 键 进 
入 或 者 用 鼠标 单 击 第 一 个 日 期 字段 时 ， 页 面 会 显示 一 个 双 日 历 的 datepicker 


脚本 16-3 在 以 下 HTML 页面 中 添加 了 双 联 日 历 ， 其 中 包含 两 个 日 期 字段 


<!DOCTYPE html» 
<html> 
<head> 
<title>jQuery Date Picker: 2 up</title> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/sunny/ 
—jquery-ui.css"» 
«script src-"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"»«/script» 
«script src-"http://ajax.googleapis.com/ ajax/libs/jqueryui/1/jquery-ui.js"» «/script» 
«script src="script03.js"></script> 
«/head» 
«body» 
«hi»Select your check in and check out dates:</h1> 
«label for-"from"»From«/label» 
<input type="text" id="from" name="from"> 
<label for="to">to</label> 
<input type="text" id="to" name="to"> 
</body> 
</html> 
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2.var dates = $("#from, ito"). datepicker(( 

乍 一 看 ， 脚 本 16-4 所 示 的 JavaScript 代码 与 脚本 16-2 颇 为 相似 ， 但 实际 上 并 不 相同 。 与 之 前 将 
datepicker 对 象 绑 定 给 页 面 上 的 一 个 元 素 不 同 ， 我 们 现在 将 其 绑 定 到 了 两 个 元 素 上 : id 值 为 from 和 
to 的 两 个 元 素 。 此 外 ， 我 们 还 将 datepicker 的 返回 结果 保存 到 了 dates 变量 中 以 备 将 来 使 用 。 


脚本 16-4 jQuery 函数 将 datepicker 对 象 绑 定 到 了 页 面 的 两 个 日 期 字段 上 ， 并 将 返回 结果 存储 到 一 
个 变量 中 


$(function() { 
var dates = $("#from, #to").datepicker({ 

defaultDate: "+1w", 

numberOfMonths: 2, 

onSelect: function(selectedDate) ( 
var option - (this.id -- "from") ? "minDate" : "maxDate", 
date - $.datepicker.parseDate ($.datepicker. defaults. dateFormat, selectedDate); 
dates.not(this).datepicker ("option", option, date); 




















} 
5 
5 


3. defaultDate: "+1w", 
通过 datepicker 部 件 ， 我 们 可 以 设置 默认 的 开始 日 期 。 这 里 ， 我 们 将 其 设 为 下 周 的 今天 。 
4. numberOfMonths: 2, 
使 用 jQuery 的 原因 之 一 在 于 它 的 灵活 性 , datepicker 部 件 灵活 性 的 具体 表现 之 一 是 它 可 以 轻易 地 
修改 每 次 显示 的 月 份 数 。 此 处 ， 我 们 要 一 次 显示 两 个 月 。 

5. onSelect: function(selectedDate) { 

与 之 前 的 示例 一 样 ， 我 们 希望 在 日 期 被 选中 的 同时 做 一 些 事情 ， 有 具体 而 言 ， 就 是 在 这 个 位 置 编写 
相应 的 代码 ， 如 图 16-8 所 示 。 















































Select your check in and check out dates: 
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图 16-8 在 月 份 名 称 栏 的 左右 两 侧 有 箭头 形状 的 按钮 , 你 可 以 单 击 它 们 来 更 改 月 份 的 显 
示 。 要 选择 开始 日 期 ， 只 要 单 击 左 侧 日 历 中 的 日 期 即 可 














6. var option = (this.id == "from") ? "minDate" : "maxDate", 
此 处 ， 我 们 指出 了 当前 所 用 的 日 历 ， 并 将 结果 存储 在 option 变量 中 。 如 果 this. id 的 值 为 from, 
option 变量 的 值 会 被 设 为 minDate。 否则 , 如 果 this.id 的 值 为 to, option 变量 的 值 会 被 设 为 maxDate。 
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7. date = $.datepicker.parseDate($.datepicker. defaults.dateFormat, selectedDate) ; 
我 们 能 够 自动 获取 到 selectedDate 的 值 ， 但 其 格式 并 非 我 们 所 需 的 格式 。 此 处 ， 我 们 使 用 
datepicker 的 parseDate() 函数 来 转换 日 期 格式 ， 并 将 结果 保存 到 date 变量 
8. dates.not(this).datepicker("option", option, date); 
最 后 ， 我 们 用 刚刚 赋 过 值 的 option 变量 和 date 变量 来 辅助 设置 可 选 范围 的 开始 日 期 (minDate ) 


结束 日 期 ( maxDate )， 如 图 16-9 所 示 。 
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图 16-9 需要 注意 的 是 , 在 左 侧 的 日 历 中 选择 了 日 期 以 后 , 选 











中 日 期 之 前 的 日 期 都 会 变 








灰 失 效 。 选 中 的 第 一 个 日 期 会 被 填 人 datepicker 上 方 的 第 一 个 日 期 字段 中 。 现 
在 ,你 可 以 在 右 侧 的 日 历 中 选择 第 二 个 日 期 (高 亮 : 
其 值 会 被 填 入 到 第 二 个 日 期 字段 中 


16.4 EANA 


UI 功能 中 最 美妙 的 一 个 功能 莫 过 于 
用 户 能 够 根据 个 人 喜好 来 拖 放 页 面 元 素 。 
你 可 以 看 到 ,个 性 化 的 My Yahoo! Ail 
iGoogle 等 页 面 已 经 实现 了 拖 放 功能 ， 它 
们 允许 你 在 上 面 移动 个 性 化 的 定制 模块 。 

本 节 的 示例 中 , 我 们 将 创建 一 个 虚拟 
的 轻 量 级 表格 页 面 ， 以 显示 基于 Web 的 
幻灯 片 ， 如 图 16-10 所 示 。 你 可 以 在 页 面 
上 拖 放 图 片 , 使 其 按 特 定 的 顺序 显示 ， 如 
图 16-11 所 示 。 如 果 这 是 一 个 完整 的 Web 
应 用 程序 ， 你 甚至 可 以 单 击 “Build it!” 
按钮 来 创建 幻灯 片 , 并 让 其 按照 选 定 的 顺 
序 进行 播放 ， 如 图 16-12 所 示 。 脚 本 16-5 
是 页 面 的 HTML 代码 , 脚本 16-6 是 示例 的 
CSS 代码 ， 脚 本 16-7 是 示例 的 JavaScript 
代码 。 





















































示 的 部 分 ) 了 。 选 中 后 ， 
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Build Your Slide Show 





















































图 16-10 首次 加 载 幻 灯 片 页 面 时 ， 照 片 按照 预 设 顺序 显示 
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me 





Build it! Build Your Slide Show Build it! 





























图 16-11 ”点 中 并 
原来 的 





拖 动 一 张 图 片 会 使 其 他 图 片 脱离 。 图 16-12 重新 排列 后 的 图 片 已 经 可 以 用 于 创建 幻灯 

















位 置 片 了 ， 只 待 你 单 击 “Build it! ”按钮 (不 
过 ， 这 是 男 外 一 个 插件 了 ) 


> 启用 页 面 元 素 的 拖 放 功能 











1. <ul id="sortable"> 
«li class="ui-state-default"><img src-"images/img 0001.jpg"alt-"slide #1"></li> 
«li class="ui-state-default"><img src-"images/img 0002.jpg"alt-"slide #2"></li> 





上 面 只 列 出 了 HTML 页 面 上 列表 项 的 前 两 条 ( 共 12 条 )。 如 果 需 要 增加 或 减少 幻灯 片 中 的 图 片 ， 
只 要 添加 或 删除 列表 中 的 元 素 即 可 。 


脚本 16-5 ”用 于 描述 虚拟 轻 量 级 表格 的 HTML 页 面 中 有 一 个 无 序列 表 ， 其 中 周 括 了 所 有 的 图 片 


<!DOCTYPE html> 














<html> 
<head> 


<title>Drag and Drop Slides</title> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/ 
—jquery-ui.css"» 

<link rel="stylesheet" href="script04.css"> 
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script> 


<script 

<script 

<script 
</head> 
<body> 

«hi»Bui 

«ul id- 

di 

di 

di 

di 

<li 

<li 


src-"scripto4.js"»«/script» 


ld Your Slide Show «a href="#">Build it!«/a»«/h1» 
"sortable"» 

class="ui-state-default"><img src-"images/img 0001.jpg' 
class="ui-state-default"><img src="images/img 0002.jpg' 
class-"ui-state-default"»«img src="images/img 0003. jpg” 
class-"ui-state-default"»«img src="images/img 0004. jpg” 
class-"ui-state-default"»«img src-"images/img 0005. jpg" 
class-"ui-state-default"»«img src="images/img 0006. jpg" 


alt="slide #1"></li> 
alt="slide #2"></li> 
alt="slide #3"></li> 
alt="slide #4"></li> 
alt="slide #5"></li> 
alt="slide #6"></li> 
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<li class="ui-state-default"><img src="images/img_0007.jpg" alt="slide #7"></li> 
<li class="ui-state-default"><img src="images/img_0008.jpg" alt="slide #8"></li> 
<li class="ui-state-default"><img src="images/img_0009.jpg" alt="slide #9"></li> 
<li class="ui-state-default"><img src="images/img_0010.jpg" alt="slide #10"></li> 
<li class="ui-state-default"><img src="images/img_0011.jpg" alt="slide #11"></li> 
<li class="ui-state-default"><img src="images/img_0012.jpg" alt="slide #12"></li> 
</ul> 
</body> 
</html> 


2. #sortable { 
list-style-type: none; 
margin: 0; 
padding: 0; 
width: 820px; 

} 


在 CSS 中 ， 待 排序 的 列表 项 都 在 id (EON sortable AY div 元 素 中 ， 而 这 个 div 包含 了 页 面 的 主要 
布局 。 
3. #sortable li ( 
margin: 3px; 
padding: 3px; 
float: left; 
} 
每 个 列表 项 都 需要 有 一 定量 的 外 边 距 和 内 边 距 ， 同 时 要 被 设置 成 向 左 浮动 ， 以 便 与 周围 其 他 的 列 
项 紧密 相 邻 。 
4. #sortable li img { 
width: 256px; 
height: 192px; 
































1 





浏览 器 会 按照 上 面 定 义 的 图 片 尺 寸 来 泻 染 对 应 的 图 片 。 

5. $("#sortable").sortable().disableSelection(); 

最 后 是 jQuery 代码 。 只 有 这 些 ? 是 的 ， 代 码 就 这 人 么 多 。 以 上 所 有 的 功能 只 要 这 么 一 行 jQuery fX 
码 即 可 实现 。 现 在 ， 用 户 可 以 对 id (AON sortable 的 div 中 的 列表 项 进行 排序 了 ， 同 时 ， 我 们 屏蔽 了 
选择 功能 以 避免 用 户 在 排序 过 程 中 选中 列表 项 。 


脚本 16-6 ”虚拟 轻 量 级 表格 的 CSS 文件 ， 其 中 定义 了 页 面 的 物理 外 观 


#sortable { 
list-style-type: none; 
margin: 0; 
padding: 0; 
width: 820px; 












































} 


#sortable li { 
margin: 3px; 
padding: 3px; 
float: left; 

} 


#sortable li img { 
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h1 a 


} 


脚本 16-7 只 和 需 下 面 这 个 简单 的 jQuery 函数 ， 用 户 就 能 够 在 页 面 上 拖 放 图 片 


$(fu 
) 


width: 256px; 
height: 192px; 


{ 

float: right; 

display: inline-block; 
font-size: .8em; 

padding: 8px; 
text-decoration: none; 
background-color: silver; 
border: 1px solid gray; 
margin: -5px 25px 0 0; 


nction() { 


$("#sortable").sortable().disableSelection() ; 


16.5 ”使 用 jQuery 处 理 外 部 数据 
理论 上 , 在 Web 页 面 上 使 用 外 部 数据 (XML 或 者 JSON 数据 ) 是 比较 简单 的 。 用 户 的 显示 器 上 


有 一 个 页 面 ; 服务 器 上 有 更 多 的 数据 ; 你 希望 页 好 
服务 右上 的 数据 可 能 是 文本 、 图 片 、 音 
































i 能 够 在 不 
音乐 PLEA 





刷新 的 前 提 下 加 载 这 些 数 据 。 
F 意 形式 的 数据 。 下 面 的 示例 给 出 如 何 使 用 





jQuery 加 载 并 自动 刷新 作者 的 一 个 Twitter feed. HTML Jil, 


后 讲解 ) 


脚本 16-8 获取 并 显示 外 部 数据 Feed (示例 中 是 Twitter feed ) F, REREH 


<!DO 
<htm 
<hea 


</he 
<bod 


</bo 
</ht 








见 脚本 16-10. 


CTYPE html» 

1» 

d» 

«title»Twitter status«/title» 


«link rel="stylesheet"href="script05.css"> 
«script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 


«script src="script05.js"></script> 
ad» 
y» 
«div class-"twitter" id-"jstweets"» 
«hi»Twitter Feed with jOuery«/hi» 
</div> 
dy» 
ml» 




















脚本 16-8, CSS 见 脚本 16-9, JavaScript ( B& 





脚本 16-9 Twitter feed 中 的 元 素 被 解析 出 来 后 ，CSS 文件 就 会 为 它们 添加 样式 


a { 


a:ho 


text-decoration: none; 
font-weight: bold; 


ver ( 
text-decoration: underline; 
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#jstweets { 
border: 1px solid #555; 
margin: 30px; 
padding: 0 30px 30px 30px; 
display: inline-block; 


h1 { 
font-size: 48px; 
font-weight: normal; 
font-family: "Myriad Pro", Arial,Helvetica, sans-serif; 
margin: 5px O 30px 0; 
text-align: center; 


} 
img { 
float: left; 
padding: O 10px 20px 0; 
height: 96px; 
width: 96px; 
} 
.twitline { 
padding: 10px 0; 
border-top: 1px silver dotted; 
} 
.tdate { 
font-size: small; 
} 


脚本 16-10 ”这 个 JavaScript 文件 中 的 jQuery 代码 用 来 获取 并 处 理 ISON 格式 的 Twitter feed 


$(document).ready(function() { 
$.getJSON( 
"http://twitter.com/statuses/ user timeline.json?screen name-negrino&count-15&callback-?", 
function(data) ( 
twitDataCallback(data); 


) 
); 


function twitDataCallback(twitData) { 
var userData = twitData[0].user; 
var ct = "<div><img src='"+userData.profile_image url + "'alt='twitter pic'>"; 
ct += "<a href="http://www.twitter.com/" + userData.screen name +"'>"; 
ct += userData.name + "</a><br>Friends: " + userData.friends_count; 
ct += "<br>Followers: " + userData.followers count; 
ct += "<br>Listed: " + userData.listed_count; 
ct += "<br>" + userData.description + "</div><br clear='all'>"; 
$("itjstweets") .append(ct); 


$.each(twitData, function(i, item) ( 
ct = "<div class-'twitline'»" + item.text; 
ct = ct.replace(/http:\/\/\S+/g, '«a hrefz"$8"»$8«/a»'); 


ct += " («a class-'tdate' href-'http://www.twitter.com/"; 
ct += userData.screen name + "/status/" + item.id str; 

ct += "'>" + item.created at. substr(4,6) + "</a>)</div>"; 
$("itjstweets") .append(ct); 


) 





D; 
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> 使 用 jQuery 访问 feed 数据 











1. $. get JSON( 


"http: //twitter.com/statuses/user_timeline. json?screen_name=negrino&count=15& callback-?", 
function(data) 
twitDataCallback (data) ; 


} 
); 
代码 乍 看 起 来 很 复杂 ， 但 事实 并 非 如 此 。 传 给 $.get]JSON 的 参数 只 有 两 个 。 
口 包含 所 需 数 据 的 URL 字符 串 。 本 例 中 ， 它 是 一 个 特定 用 户 negrino 的 Twitter feed. 
口 匿名 函数 ， 它 在 获得 数据 后 会 被 调用 。 回 调 函 数 只 做 了 一 件 事 : 调用 了 另 一 个 名 为 
twitDataCallback() 的 函数 。 
2. var userData = twitData[0].user; 
现在 我 们 进入 twitDataCallback() PK, fT ARE (目前 是 名 为 twitData 的 数据 数组 ， 见 脚 
本 16-11 ) 以 便 向 页 面 添 加 元 素 。 首 先 ， 我 们 需要 用 户 自 身 的 信息 ， 而 JSON 格式 的 数据 已 经 存在 于 
user 对 象 中 了 ， 但 是 我 们 要 将 其 存 人 userData 对 象 中 。 


















































3. var ct = "<div><img src='"+userData.profile image url +"' alt-'twitter pic'>"; 

现在 开始 关注 输出 ， 输 出 使 用 此 处 声明 的 ct 变量 完成 。 首 先 ， 我 们 从 userData 对 象 中 获取 个 人 
HRKI (profile image )。 

4. ct += "<a href-'http://www.twitter.com/" + userData.screen_name + "'>" 

然后 ， 创 建 指向 用 户 Twitter 页 面 的 链接 。 

5. ct += userData.name + "</a><br>Friends: ”+ userData.friends count; 


以 上 是 用 户 名 称 的 剩余 部 分 和 链接 的 结尾 部 分 。 链 接 的 后 面 换行 显示 用 户 的 朋友 数量 。 





























6. ct += "<br>Followers: " + userData.followers count; 

朋友 数量 貌似 不 多 ， 不过， 看 到 朋友 数量 后 面 的 粉丝 数量 后 ， 你 就 不 会 这 么 想 了 。 
7. ct += "<br>Listed: " + userData.listed count; 

此 处 ， 显 示 了 他 有 多 少 个 用 户 分 组 。 

8. ct += "<br>" + userData.description +"</div><br clear='all'>"; 

这 里 是 最 后 用 到 userData 对 象 的 地 方 ， 我 们 添加 了 他 的 自我 介绍 。 

9. $("itjstweets") .append(ct); 

现在 ， 我 们 已 经 在 ct 变量 中 构建 好 了 HTML 结构 ， 是 将 其 添加 到 页 面 上 的 时 候 了 。 
10. $.each(twitData, function(i, item) ( 

接 下 来 ， 需 要 循环 处 理 每 条 Twitter feed。 内 置 函数 $.each() 会 逐 行 取出 数据 并 存 人 item 变量 中 。 
ll.ct = "<div class='twitline'>" + item.text; 

这 里 是 Twitter feed 的 文本 。 

12. ct = ct.replace(/http:\/\/\S+/g,'<a hrefz"$8"»$8«/a»') 

如 果 当 前 的 Twitter feed 中 包含 了 URL， 则 要 对 其 反 编码 并 将 其 转换 为 一 个 链接 。 
13. ct += " («a class='tdate'href='http://www.twitter.com/"; 

我 们 还 要 显示 Twitter feed 的 日 期 ， 并 将 其 做 成 指向 Twitter feed 的 Web 页 面 的 链接 。 
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14. ct += userData.screen_name + "/status/" + item.id str; 

此 处 构造 链接 的 URL. 

15. ct += "'>" + item.created_at.substr(4,6) + "</a>)</div>"; 

此 处 添加 链接 的 锚 文本 。 至 此 ， 我 们 完成 了 Twitter feed 相关 HTML 结构 的 构建 。 
16. $("itjstweets") .append(ct); 

最 后 ， 将 所 有 Twitter feed 显示 在 页 面 上 ， 如 图 16-13 所 示 。 


E: 
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Twitter Feed with jQuery 


Tom Negrino 
Friends: 49 
Py = Followers: 488 
4 Listed: 41 
Author of technology books, articles & occasional foamy 


rants. Mac guy. Broccoli is the Devil's Vegetable. 


Bought @manytricks Moom. Looking forward to using it to arrange work 
windows on the second monitor. (Jun 08) 


@ShawnKing @SharonZardetto @adamengst Uh...No. Rather that I don't 
want to see Adam hurt by his wacky shoes. The mocking is a side benefit 
(Jun 08) 


@SharonZardetto @ShawnKing @adamengst I'm just trying to provide a 
public service... :-) (Jun 08) 


@adamengst "He explains that he injured one of his feet exercising...by his 
use of special five-toed running shoes." http://bit.ly/jGhOPZ (Jun 08) 


Nomenclature change on Apple site: It was "Mac OS X Snow Leopard." Now 
it's "OS X Lion." Usually significant when stuff like this happens. (Jun 07) 


























图 16-13 jQuery 代码 获取 到 一 条 ISON 格式 的 feed (本 例 中 ， 是 本 书 其 中 一 位 作者 的 
Twitter 数据 流 ) ， 解 析 它 ， 并 将 结果 显示 在 页 面 上 


脚本 16-11 这 份 脚 本 不 属于 我 们 的 代码 部 分 。 它 是 脚本 16-10 中 的 JavaScript 下 载 的 JSON 格式 的 
feed 数据 的 一 部 分 


jQuery16104507184331305325_1307612310205([ 
{ 

















"in reply to status id":null, 

"user": 

"listed count":41, "profile background color":"EBEBEB","protected":false,"profile background 
—image_url":"http:\/\/a1.twimg.com\/images\/themes\/theme7\/bg.gif", "screen name":"negrino", 
—"name":"Tom Negrino", "statuses count":4889,"id str":"6187302", "lang":"en", "utc offset": 
—-28800, "profile text color":"333333","default profile image":false, "favourites count":1, 
"profile sidebar fill color":"F3F3F3", "description":"Author of technology books, articles & 
—occasional foamy rants. Mac guy. Broccoli is the Devil's Vegetable.", "profile background 
—tile":false,"friends count":49, "location":"Healdsburg, CA", "is translator":false, "default 
—profile":false, "follow request sent":false, "profile link color":"990000","followers count" :488, 
—"ur1":"http: V/NV/www.backupbrain.com", "id":6187302,"following":true, "verified":false, "profile 
—sidebar border color":"DFDFDF","time zone":"Pacific Time (US & Canada)", "created at":"Mon May 
21 01:14:31 40000 2007", "show all inline media":false, "contributors enabled":false,"geo enabled": 
—true, "notifications":false, "profile use background image":true,"profile image url":"http:V/M/a2. 
—twimg. com\/profile_images\/1205071991\/TN-headshot_ normal. jpg" am 





b 
"favorited":false, "in_reply_to_status_id_str":null, "id str":"78272847184805888","in reply to. 
screen name":null, "text":"Bought @manytricks Moom. Looking forward to using it to arrange work 
— windows on the second monitor.", "in reply to user id str": null, "place":null, "contributors":null, 


320 


% 16% AF jQuery 的 应 用 





—"retweeted": false, "coordinates":null,"geo":null, "retweet_count":0, "in reply to user id":null, 
—"id":78272847184805888, "truncated":false, "source":"\u003Ca href=\"http:\/\/www.nambu.com\/\" 
—rel- \"nofollow\"\u003ENambu\u003C\/a\u003E", "created at":"Wed Jun 08 01:31:15 +0000 2011" 


"in reply to status id":78263067070312450, 

"user": 

"follow request sent":false, "friends count":49, "profile background color":"EBEBEB", "protected" :false, 
—"profile background image url":"http:V/MV/a1.twimg.comV/imagesV/ themes\/theme7\/bg.gif", 
—"screen name":"negrino", "name":"Tom Negrino", "id str":"6187302", "lang":"en", "utc offset":-28800, 
—"profile text color":"333333", "show all inline media":false, "listed count":41, "geo enabled": 
—true, "favourites count":1,"profile sidebar fill color":"F3F3F3", "description":"Author of 
—technology books,articles & occasional foamy rants. Mac guy. Broccoli is the Devil's Vegetable.", 
—"contributors enabled":false, "profile background tile":false, "location":"Healdsburg,CA", 
—"statuses count":4888, "profile link color":"990000", "followers count":488,"url":"http:V/V/ 
—www.backupbrain.com", "id":6187302, "default profile image":false,"following":true, "veri- 
—fied":false, "profile sidebar border color":"DFDFDF","default profile":false, "time zone": 
—"Pacific Time (US & Canada)", "created at":"Mon May 21 01:14:31 +0000 2007", "is translator": 
—false, "notifications":false, "profile use background image":true, "profile image url":"http: 
—\/\/a2.twimg.com\/profile_ images\/1205071991\/TN-headshot_normal. jpg" 

b 
"favorited":false, "in reply to status id str":"78263067070312450", "id_str":"78265427008045057", 
—"in reply to screen name":"ShawnKing", "text":"GShawnKing @SharonZardetto @adamengst Uh...No. 
—Rather that I don't want to see Adam hurt by his wacky shoes. The mocking is a side benefit.", 
—"in reply to user id str":"5026991","place":null, "contributors":null, "retweeted":false, 
—"coordinates":null, "geo":null,"retweet count":0, "in reply to user id":5026991, "id":78265427- 
—008045057, "truncated" :false, "source":"Nu003Ca href=\"http:\/\/www.nambu.com\/\" rel=\"nofollow\ 
—"Nu003ENambuN u003C\/a\u003E", "created at":"Wed Jun 08 01:01:46 +0000 2011" 


"retweet count":0, "geo":null, 

"user": 
"default profile image":false, "profile sidebar border color":"DFDFDF", "protected": false, 
—"show all inline media":false, "verified":false, "geo enabled":true,"time zone":"Pacific Time 
— (US & Canada)", "favourites count":1, "created at":"Mon May 21 01:14:31 +0000 2007", "friends count": 
49, "screen name":"negrino", "name":"Tom Negrino", "id str":"6187302", "is translator":false, 
—"default_profile": false, "profile use background image":true, "follow request sent":false, "foll- 
—owing":false,"utc offset":-28800, "profile background color":"EBEBEB", "contributors enabled": 
—false, "statuses count":4889, "notifications":false, "profile background image url":"http:V/M/a1. 
—>twimg.com\/images\/themes\/theme7\/bg.gif", "followers count":489,"description":"Author of technology 
books, articles & occasional foamy rants. Mac guy. Broccoli is the Devil's Vegetable.", "profile text - 
—color":"333333", "listed count":41,"profile sidebar fill color":"F3F3F3", "id":6187302, "profile 
background tile":false,"location":"Healdsburg, CA", "lang":"en", "profile link color":"990000", 
"url": "http: V/NVwww.backupbrain.com", "profile image url":"http:V/M/a2.twimg.comMV/profile images 
—+/1205071991\/TN-headshot_normal. jpg" 

b 

"created at":"Wed Jun 08 00:51:51 +0000 2011", "id str":"78262929430028288", "in reply to user id": 
20821898, "text":"@SharonZardetto @ShawnKing @adamengst I'm just trying to provide a public 
—service... :-)", "truncated":false, "favorited":false, "in reply to status id str":"782621568853 
77024", "id":78262929430028288, "in reply to screen name":"SharonZardetto","in reply to status - 
—id":78262156885377024, "source":"Nu003Ca href=\"http:\/\/www.nambu.com\/\" rel=\"nofollow\"\ 
—uoo3ENambuNu003CV/aNuO03E", "in reply to user id str":"20821898", "coordinates":null, "contributors":null, 
—"place":null, "retweeted" : false 


"retweet count":0, "geo":null, 
"user":(- 
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"default profile image":false, "profile sidebar border color":"DFDFDF", "protected": false, 
"show all inline media":false, "verified":false, "geo enabled":true,"time zone":"Pacific Time 
一 (US & Canada)", "favourites count":1, "created at":"Mon May 21 01:14:31 40000 2007", "friends 
—count":49, "screen name":"negrino", "name":"Tom Negrino", "id str":"6187302", "is translator": 
—false, "default profile":false,"profile use background image":true,"follow request sent":false 
—"following":false,"utc offset":-28800, "profile background color":"EBEBEB", "contributors enabled": 
—false, "statuses count":4889, "notifications":false, "profile background image url":"http:V/ 
—\/a1.twimg.com\/images\/themes\/theme7\/bg.gif", "followers count":489,"description":"Author 
—of technology books, articles & occasional foamy rants. Mac guy.Broccoli is the Devil's Vegetable.", 
"profile text color":"333333", "listed count":41,"profile sidebar fill color":"F3F3F3", "id": 
—6187302, "profile background tile":false,"location":"Healdsburg, CA", "lang":"en", "profile 
—]1ink color":"990000", "url":"http:\/\/www.backupbrain.com", "profile image url":"http:V/MV/a2. 
—>twimg.com\/profile_images\/1205071991\/TN-headshot_normal. jpg" 

b 

"created at":"Wed Jun 08 00:44:08 +0000 2011", "id str":"78260990495571968", "in reply to user id": 
1502501, "text":"@adamengst \"He explains that he injured one of his feet exercising...by his use 
一 of special five-toed running shoes. V" http: V/V/bit.lyM/jGhoPZ" , "truncated" : false, "favorited": 
—false, "in reply to status id str":null,"id":78260990495571968, "in reply to screen name":"adamengst", 
—"in reply to status id":null, "source":"\u003Ca href=\"http:\/\/www.nambu.com\/\" rel=\"nofollow\" 
—Nu003ENambuNu003CV/aNVu003E" , "in reply to user id str":"1502501", "coordinates" :null, "contributors": 
null, "place":null, "retweeted":false 


"retweet count":0, "geo":null, 

"user": 
"default profile image":false, "profile sidebar border color":"DFDFDF", "protected": false, 
"show all inline media":false, "verified":false, "geo enabled":true,"time zone":"Pacific Time 
一 (US & Canada)", "favourites count":1, "created at":"Mon May 21 01:14:31 40000 2007", "friends 
—count":49, "screen name":"negrino", "name":"Tom Negrino", "id str":"6187302", "is translator": 
—false, "default profile":false,"profile use background image":true, "follow request sent":false, 
—"following":false,"utc offset":-28800, "profile background color":"EBEBEB","contributors enabled": 
—false, "statuses count":4889, "notifications":false, "profile background image url":"http:V/ 
—\/a1.twimg. com\/images\/themes\/theme7\/bg.gif", "followers count":489,"description":"Author of 
technology books, articles & occasional foamy rants. Mac guy.Broccoli is the Devil's Vegetable.", 
"profile text color":"333333", "listed count":41,"profile sidebar fill color":"F3F3F3","id":6187302, 
"profile background tile":false,"location":"Healdsburg, CA", "lang": "en", "profile link color": 
—"990000", “url":"http:\/\/www.backupbrain.com", "profile image url":"http:V/NV/a2.twimg.comMV/ 
—profile images V/1205071991V/TN-headshot normal.;jpg" 

b 

"created_at":"Tue Jun 07 18:11:00 +0000 2011", "id_str":"78162052518117376", "in_reply_to_user_ 
—id":null, "text":"Nomenclature change on Apple site: It was \"Mac OS X Snow Leopard. V" Now it's \"OS 
X Lion. V" Usually significant when stuff like this happens." , "truncated" : false, "favorited":false, 
—"in reply to status id str":null,"id":78162052518117376, "in reply to screen name":null, "in. 
—reply to status id":null,"source":"Nu003Ca href=\"http:\/\/www.nambu.com\/\" rel=\"nofollow\ 
—+"\u003ENambu\u003C\/a\ u003E", "in reply to user id str":null, "coordinates":null, "contributors": 
null,"place":null, "retweeted":false 


"retweet count":0, "geo":null, 

"user": 

"default profile image":false, "profile sidebar border color":"DFDFDF", "protected":false, 
"show all inline media":false, "verified":false, "geo enabled":true,"time zone":"Pacific 
—Time (US & Canada)", "favourites count":1, "created at":"Mon May 21 01:14:31 40000 2007", 
"friends count":49, "screen name":"negrino", "name":"Tom Negrino", "id str":"6187302", 

"is translator":false, "default profile":false,"profile use background image":true, 
"follow request sent":false, "following":false,"utc offset":-28800, "profile background 
—color":"EBEBEB", "contributors enabled":false, "statuses count":4889, "notifications":false, 


—"profile background image url":"http:V/MV/a1.twimg.comMV/imagesV/themesV/theme7M/bg . gif" , 
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} 
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hs 


hs 


—"followers count":489,"description":"Author of technology books, articles & occasional foamy 
—rants. Mac guy.Broccoli is the Devil's Vegetable.", "profile text color":"333333", "listed 
—count":41,"profile sidebar fill color":"F3F3F3", "id":6187302, "profile background tile": 
—false,"location":"Healdsburg, CA", "lang":"en", "profile link color":"990000", "url":"http: 


—\/\/www.backupbrain.com","profile_image_url":"http:\/\/a2.twimg.com\/profile_images\ 
—+/1205071991\/TN-headshot_normal. jpg" 


"created at":"Tue Jun 07 17:57:01 +0000 2011", "id str":"78158535229317120", "in reply to user id": 
15868259, "text":"Qnpann @tedlandau Question: if the file system goes away (Steve was pretty 
—explicit yesterday), do we lose control over our own data?" , "truncated" : false, "favorited": false, 
—"in reply to status id str":"78156242631135232","id":78158535229317120, "in reply to screen name": 
—"npann", "in reply to status id":78156242631135232, "source":"\u003Ca href=\ "http: V/N/www. 
—nambu.com V/A" rel-V'nofollowV"N u003ENambu\u003C\/a\u003E", "in reply to user id str":"15868259", 
—"coordinates":null,"contributors":null, "place":null, "retweeted":false 


"retweet count":0, "geo":null, 

"user": 

"default profile image":false, "profile sidebar border color":"DFDFDF", "protected":false, 
—"show all inline media":false, "verified":false, "geo enabled":true,"time zone":"Pacific Time 
— (US & Canada)", "favourites count":1, "created at":"Mon May 21 01:14:31 40000 2007", "friends count": 
49, "screen name":"negrino", "name":"Tom Negrino", "id str":"6187302", "is translator":false, 
"default profile":false,"profile use background image":true, "follow request sent":false, 
—"following":false,"utc offset":-28800, "profile background color":"EBEBEB", "contributors 
—enabled":false, "statuses count":4889, "notifications":false, "profile background image url": 
—"http:V/MV/a1.twimg.comMV/imagesN /themes\/theme7\/bg.gif", "followers count":489,"description": 
—"Author of technology books, articles & occasional foamy rants. Mac guy.Broccoli is the Devil's 
—Vegetable.", "profile text color":"333333", "listed count":41,"profile sidebar fill color": 
—"F3F3F3", "id":6187302, "profile background tile":false,"location":"Healdsburg, CA", "lang": 
—"en", "profile link color":"990000", “url":"http:\/\/www.backupbrain.com", "profile image url": 
—"http:\/\/a2.twimg.com\/profile_images\/1205071991\/TN-headshot_normal. jpg" 


"created at":"Tue Jun 07 17:45:14 +0000 2011", "id str":"78155571475390464", "in reply to user_ 
—id":11450572, "text":"Gtedlandau @npann Dropbox is so part of my workflow now that it's not 
—replaceable. It xfers files on adjacent machines, on the same network.","truncated":false, 
—"favorited":false, "in reply to status id str":"78153263664463872" "id" :78155571475390464, 
—"in reply to screen name":"tedlandau", "in reply to status id":78153263664463872, "source": 
—"Nu003Ca href=\"http:\/\/www.nambu.com\/\" rel=\"nofollow\"\ u003ENambu\u003C\/a\u003E", 
"in reply to user id str":"11450572", "coordinates":null,"contributors":null, "place":null, 
—"retweeted" : false 


16.6 ”使 用 jQuery 插件 
如 前 所 述 ,开发 人 员 为 了 扩展 jQuery 的 核心 功能 而 创建 了 各 式 各 样 的 插件 ,jQuery 插件 数量 太 多 ， 


本 书 不 可 能 一 一 讨论 ， 因 此 我 们 用 一 个 示例 来 展示 jQuery 插件 的 强大 。 
本 例 中 ， 你 会 看 到 如 何 使 用 jQuery 插件 来 实现 一 个 功能 齐全 的 
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HTMLS 的 audio 标签 , 且 对 于 不 支持 HTMLS 的 浏览 器 使 用 Flash 提供 向 下 兼容 支持 。 页 面 加 载 时 ， 
仅 出 现 几 个 小 按钮 ， 如 图 16-14 所 示 ， 但 是 按 下 播放 键 后 ， 播 放 器 会 展开 以 显示 其 所 有 功能 ， 如 图 


16-15 所 示 。 
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{Æ Audio player - Internet Explorer provided by Dell Se) 
Qu- [E htp di.dro... +] 84] x | [le sing 9 | 

File Edit View Favorites Tools Help 已 播放 时 间 
di Favorites | 次 Æ) Bookmarklets 

@ Audio player > @ > & od o Pager Safety 





jQuery HTMLS audio player 
jQuery HTMLS audio player 


Rhapsody in Blue 04:0 
、 
可 放 


| @ Internet | Protected Mode: On fà &100% + 播放 音量 































































































进度 条 暂停 
图 16-14 这 个 jQuery 插件 创建 了 一 个 HTML5 音频 ”图 16-15 单 击 播放 按钮 即 开始 播放 文件 ， 这 时 ， 你 
播放 器 。 加 载 后 ， 控 制 面板 会 被 最 小 化 又 可 以 看 到 熟悉 的 播放 控制 面板 了 





1. <script src="mbPlayer/jquery.mb.miniPlayer.js"></script> 
«script src="mbPlayer/jquery. jplayer.min.js"></script> 
在 脚本 16-12 中 ， 脚 本 标签 引入 音频 插件 的 两 个 部 分 ， 这 个 音频 插件 的 下 载 地址 是 http://plugins. 
jquery.com/project/mbMiniAudioPlayer。 插件 可 以 免费 下 载 ， 日 像 自 定义 主题 那样 ,随后 需要 整合 到 网 
站 中 。 下 载 的 内 容 还 包括 了 脚本 16-13 所 示 的 用 于 泻 染 播放 器 样式 的 CSS 代码 。 











脚本 16-12 在 HTML 页面 上 添加 jQuery 插件 以 提供 HTMLS 音频 播放 器 功能 


<!DOCTYPE html» 
<html> 
<head> 
<title>Audio player</title> 
<link rel="stylesheet"href="script06.css"/> 
<script src-"http://ajax.googleapis.com/ ajax/libs/jquery/1/jquery.js"></script> 
<script src="mbPlayer/jquery.mb.miniPlayer.js"></script> 
<script src="mbPlayer/jquery.jplayer.min.js"></script> 
<script src="script06.js"></script> 
</head> 
<body> 
<h2>jQuery HTML5 audio player</h2> 
<div> 
«a class="audio (ogg: 'mbPlayer/Rhapsody_in Blue.ogg'}" href-"mbPlayer/Rhapsody in Blue.mp3"»Rhapsody 
一 in Blue</a> 
</div> 
</body> 
</html> 


2. «a class="audio {ogg:'mbPlayer/Rhapsody in Blue.ogg'}"href="mbPlayer/Rhapsody in Blue. 
—mp3"»Rhapsody in Blue</a> 


按照 说 明 (包含 在 下 载 文件 中 ) 生成 链接 ， 加 载 完成 后 ， 播 放 器 会 播放 我 们 最 喜欢 的 _ 首 歌曲 的 am 
MP3 或 者 Ogg 版 本 。 
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脚本 16-13 文件 中 的 CSS 随 音频 播放 插件 一 起 提供 ， 其 作用 是 为 音频 播放 器 的 不 同 部 分 添加 样式 


@font-face { 
font-family: 'mb audio fontRegular' ; 
src: url('mbPlayer/mbAudioFont/mb audio font.eot'); 
src: local(',6f'), url('mbPlayer/mbAudioFont/mb audio font.woff')format('woff'), url('mbPlayer/ 
—mbAudioFont/mb audio font.ttf')format('truetype'), url('mbPlayer/mbAudioFont/mb audio font- 
—webfont_svg#webfontywr4YLri') format('svg'); 
font-weight: normal; 
font-style: normal; 


) 


.mbMiniPlayer span { 
font: 16px/20px "mb_audio_fontRegular", "Webdings", sans-serif; 
} 


a.audio { 
display: none; 


.mbMiniPlayer table { 
-moz-border-radius: 5px; 
-webkit-border-radius: 8px; 
border-radius: 5px; 
margin: 5px; 


) 


.mbMiniPlayer.shadow table ( 
border: 1px solid white; 
-moz-box-shadow: #ccc Opx Opx 5px; 
-webkit-box-shadow: #ccc Opx Opx 5px; 
box-shadow: #ccc Opx Opx 5px; 


) 


.mbMiniPlayer.black td { 
margin: 0; 
padding: 0; 


-jp-progress { 
position: relative; 
background-color: #fff; 
height: 8px; 
margin: 2px; 
margin-top: 0; 
top: -2px; 
-moz-box-sizing: border-box; 
cursor: pointer; 


} 


.jp-load-bar { 
background-color: #e9e6e6; 
height: 6px; 
-moz-box-sizing: border-box; 


} 


.jp-play-bar { 
background-color: black; 
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7D7D7D), to(#262626) ,color-stop(.6,#333)); 
height: 6px; 
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-moz-box-sizing: border-box; 


} 


.mbMiniPlayer td.controlsBar { 
background-color: #ccc; 
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DEDEDE), to(#FFF),color-stop(.6,#FFF)); 
margin: 0; 
padding: 0; 
cursor: default ! important; 
box-shadow: inset 1px 1px 2px #999; 
-moz-box-shadow: inset 1px 1px 3px #999; 
-webkit-box-shadow: inset 1px 1px 2px #999; 


} 


.mbMiniPlayer .controls { 
margin: 1px; 
display: none; 
width: 1px; 
border: 1px solid gray; 
height: 100%; 
-moz-box-sizing: border-box; 
overflow: hidden; 
white-space: nowrap; 


} 


.mbMiniPlayer span { 
display: inline-block; 
padding: 3px; 
width: 20px; 
height: 20px; 
color: white; 
text-align: center; 
text-shadow: 1px -1px 1px #000; 
background-image: -webkit-gradient(linear, 0% 5%, 85% 100%, from(transparent) ,to(rgba(100, 100, 100,0.5))); 


} 


.mbMiniPlayer span.title { 
position: relative; 
color: #333; 
font:10px/12px sans-serif; 
text-shadow: none ! important; 
letter-spacing: 1px; 
width: 100%; 
height: 8px; 
top: -4px; 
background: transparent ! important; 
text-align: left; 
cursor: default ! important; 


} 


.mbMiniPlayer span.rew { 
width: 1px; 
cursor: pointer; 


} 


.mbMiniPlayer span.volumeLevel a { 
position: relative; 
display: inline-block; 
margin: 0; 
margin-right: 2px; 
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width: 2px; 
padding: 0; 
background-color: white; 
height: 0; 
vertical-align: bottom; 
opacity: .1; 
cursor: pointer; 

} 


.mbMiniPlayer span.volumeLevel a.sel { 


} 


-moz-box-shadow: #000 Opx Opx 1px; 
-webkit-box-shadow: #000 Opx Opx 1px; 
box-shadow: #000 Opx Opx 1px; 


.mbMiniPlayer span.time { 


} 


width: 1px; 

font: 11px/20px sans-serif; 
overflow: hidden; 

white-space: nowrap; 

cursor: default ! important; 
text-shadow: 0 0 2px #999! important; 


.mbMiniPlayer span.play { 


} 


-moz-border-radius: 0 5px 5px 0; 
-webkit-border-top-right-radius: 5px; 
-webkit-border-bottom-right-radius: 5px; 
border-radius: 0 5px 5px 0; 

cursor: pointer; 


.mbMiniPlayer span.volume { 


} 


-moz-border-radius: 5px 0 0 5px; 
-webkit-border-top-left-radius: 5px; 
-webkit-border-bottom-left-radius: 5px; 
border-radius: 5px 0 O 5px; 

cursor: pointer; 


.mbMiniPlayer.black span { 


} 


background-color: #666; 
text-shadow: 1px -1px 1px #000; 


.mbMiniPlayer.black span.play { 


} 


border-left: 1px solid #333; 


.mbMiniPlayer.black span.volume { 


} 


border-right: 1px solid #999; 





.mbMiniPlayer.black span.volume.mute { 


} 


color: #999; 


3. $(".audio").mb miniPlayer(( 


width: 360, 
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inLine: false， 

showRew: true, 

showTime: true 

5 
以 上 是 我 们 需要 添加 的 所 有 jQuery 代码 一 一 其 他 所 需 代码 都 由 插件 脚本 完成 了 。 第 3 步 中 , 我 们 

将 播放 器 的 宽度 设置 为 360 像素 ,将 inline 属性 设置 成 false〈 即 它 不 属于 常规 文件 流 )， 同 时 ,我 
们 还 显示 了 回放 按钮 和 播放 时 间 。 
v 提示 
口 如 对 音频 插件 有 疑问 ， 请 访问 其 作者 的 支持 网 站 http://jquery.pupunzi.com。 


脚本 16-14 通过 jQuery 来 调用 音频 播放 胡 插 件 ， 其 对 应 的 JavaScript 文件 只 有 几 行 代码 


$(function(){ 
$(". audio") .mb_miniPlayer ({ 
width: 360, 
inLine: false, 
showRew: true, 
showTime: true 


H; 























D 





bookmarklet 











你 知道 ， 可 以 使 用 JavaScript 从 网 页 内 部 控制 Web 浏览 器 。 但 是 ， 在 不 使 用 网 页 的 情况 下 ， 
/小 也 可 以 使 用 JavaScript 控制 浏览 句 ， 所 用 的 技术 称 为 bookmarklet。bookmarklet 是 一 种 特殊 
的 书签 (或 者 用 TE 的 术语 来 说 是 收藏 来 ， 有 时 候 bookmarklet 也 称 为 favelet ) 其 中 包含 对 浏览 器 的 
JavaScript 解释 器 的 调用 ， 而 不 是 外 部 URL. bookmarklet 中 的 JavaScript 可 以 做 任何 事情 ， 比 如 获得 
图 像 的 相关 信息 ， 给 出 一 个 单词 的 定义 以 及 调整 浏览 器 窗口 。 如 果 你 掌握 了 JavaScript， 就 很 容易 添 
加 这 种 功能 ， 从 而 使 你 的 浏览 器 成 为 更 智能 化 、 更 好 的 工具 。 

bookmarklet 与 其 他 JavaScript 代码 不 太一 样 ， 因 为 它们 有 一 个 重要 而 有 意思 的 格式 限制 : 它们 必 
须 写 在 一 行 中 。 要 使 用 分 号 把 命令 连 在 一 起 。 

在 本 章 中 , 我 们 将 介绍 一 些 有 用 的 bookmarklet， 只 需 稍 费 点 儿 工 夫 , 你 就 能 够 编写 出 自己 的 bookmarklet. 























17.1 第 一 个 bookmarklet 


脚本 17-1 确实 不 是 个 很 让 人 兴奋 的 脚本 , 它 是 我 们 常见 的 Hello World 脚本 的 变 体 。 但 重要 的 是 ， 
你 让 Web 浏览 器 执行 了 某 些 操作 , 而 没有 加 载 网 页 。 这 个 示例 还 演示 了 如 何在 各 种 浏览 器 中 创建 和 使 
用 bookmarklet。 





脚本 17-1 这 个 bookmarklet 返回 Hello World 


javascript:alert('Hello World'); 





> f£ Firefox 3 及 其 后 续 版 本 中 创建 bookmarklet 

























1. 在 Bookmarks 菜单 上 ， 选 择 niu 
Organize Bookmarks ( Firefox 3 ) 或 者 id _ rows s 
Show All Bookmarks( Firefox 4 及 后 续 Fna- ' a 
版 本 , 见 图 17-1), Library 窗口 打开 。 ae | 
2. 在 左 栏 中 ， 选 择 Bookmarks | J See. 
Toolbar。 在 上 面 的 工具 栏 中 ， 选 择 . m: . : Une Books 











Action 菜单 ( YE Mac F, JL 17-2) 
a Organize EE (4 Windows "fi, Ji 17-1 Firefox ( 图 中 是 Windows 版 本 ,但 是 Mac 版 本 是 相似 


17-3 )， 然 后 选择 New Bookmark 的 ) 允许 用 户 选择 Show All Bookmarks, E Library 中 
， 然 b 输入 bookmarklet 
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eoo Library E 


















r , 
@ library [EE] 


ws ~ ** ImportendBackup > RM 






Tags) New Folder. 


















































© [Al New Separator New Bookmart Tags Lecation 
* cej Move... E New Folder... Most Visited 
mu Delete Del A L | New Separator Getting Started http://www.mozilla.com/en-... 
Boj Latest Headlines 
> E] Bo Cut Ctrl+X 
&& Un Copy — Ctr«C 
Paste Ctrl+V 
Undo Ctrl+Z 
Redo Ctr Y 
Select All Ctrlea fame: Bookmarks Toolbar 
z Move... 
DERI 
Delete Del 
Close — Cte W 
器 
\ J 
图 17-2 ”苹果 机 上 的 Firefox 在 Action 菜单 中 图 17-3 Windows 上 的 Firefox 在 Organize 
ib m Aus 
提供 New Bookmark 菜单 项 菜单 中 提供 New Bookmark 菜单 项 




















3. 在 Name 字段 中 ,输入 希望 出 现在 工具 栏 上 的 名 称 。 在 这 个 示例 中 ,输入 Hello. 
4. 在 Location 字段 中 ( 见 图 17-4 ), 输入 javascript:alert('Hello World');， 然 后 单 击 Add. 








Name: Hello 


Location: javascript:alert('Hello World’); 


Tags: Separate tags with commas Y 








Keyword: 





Description: 


口 Load this bookmark in the sidebar 


( Cancel ) (aad) 


[d 17-4 1E Firefox "P, TE New Bookmark 对 话 框 中 向 Location 字段 添加 bookmarklet 代码 














这 时 会 返回 到 Library 窗口 。 
5. 关闭 Library 窗口 。 新 按钮 应 该 出 现在 Bookmarks Toolbar 上 。 单 击 这 个 按钮 就 会 激活 命令 ， 显 
示 一 个 包含 文本 “Hello World” 的 警告 框 。 
V 提示 
O 如 果 在 Firefox 中 没有 看 到 Bookmarks Toolbar ， 那 么 可 以 通过 选择 View 一 Toolbars 一 
Bookmarks Toolbar 来 显示 它 。 


-> 在 Safari 中 创建 bookmarklet 


1. 确保 View 菜单 中 的 菜单 项 显示 Hide Bookmarks Bar 而 不 是 Show Bookmarks Bar， 从 而 保证 
Bookmarks Bar 可 见 。 
2. 在 Address Bar 中 ,输入 javascript:alert('Hello World');. 
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3. 将 地 球 图 标 (输入 文本 的 左边 ) 从 Address Bar 拖 动 到 Bookmarks Bar E, 并且 释放 鼠标 
按钮 。 


一 个 对 话 框 出 现 ， 要 求 我 们 输入 新 书签 的 名 称 ( 见 图 17-5 )。 














Type a name for the bookmark. 


Hello | 








图 17-5 XE Address Bar 中 输入 bookmarklet 代码 ， 并 且 将 它 拖 动 到 Bookmarks Bar E, 
Safari 就 会 提示 输入 bookmarklet 的 名 称 


4. 输入 bookmarklet 的 名 称 ， 然 后 单 击 OK 按钮 。 

新 的 bookmarklet 以 按钮 形式 出 现在 Bookmarks Bar 中 ， 单 击 这 个 按钮 就 会 激活 命令 。 

V 提示 

口 如 果 愿 意 的 话 ， 可 以 选择 Bookmarks 一 Show All Bookmarks ， 将 bookmarklet 从 Bookmarks Bar 

转移 到 Bookmarks 菜 单 中 。 

O 要 想 从 Safari Bookmarks Bar 中 删除 bookmarklet， 应 该 将 它 拖 动 到 浏览 器 窗口 中 。 它 会 显示 一 段 烟 
雾 动画 ， 然 后 就 消失 了 。 如 果 意 外 地 删除 了 不 该 删除 的 书签 ， 可 以 按 Cmd-Z/ Ctrl-Z 来 恢复 它 。 














bookmarklet 的 起 源 


bookmarklet 的 想法 最 初 来 自 Netscape JavaScript Guide， 它 指出 如 何在 Personal Toolbar 中 添加 
JavaScript。 现 在 主持 Bookmarklets.com 站 点 的 Steve Kangas 发 明了 术语 bookmarklet。 他 的 Web 站 
点 (WWw.bookmarklets.com ) 几 年 来 没 怎么 变化 ， 它 包含 数 百 个 有 用 的 bookmarklet ， 本 章 只 涉及 一 
些 皮 毛 。 得 到 他 的 允许 ， 本 章 中 的 一 些 示例 参考 了 该 站 点 上 的 脚本 。 


> 在 IE 7 中 创建 bookmarklet 


1. 在 Favorites 菜单 中 ， 选 择 Add to Favorites, Favorites Center 对 话 框 出 现 ( ILEI 17-6 )。 














Favorites Center 


Add a Favorite 


Add this webpage as a favorite. To access your 
favorites, visit the Favorites Center. 


Name: Hello 


Create in: | 器) Links v| | New Folder 
Cancel 


























图 17-6 下 7 调用 了 书签 Favorites， 打 开 了 Favorites Lenter 
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2. 在 Name 字段 中 ,输入 Hello. 

3. 在 对 话 框 的 Create in 部 分 中 ， 选 择 Links 文件 夹 以 确保 新 的 书签 出 现在 Links Toolbar 中 ， 单 击 
Add 按钮 。 

4. 右 击 Links Toolbar 中 新 的 “Hello”bookmarklet， 选 择 Properties, Properties 对 话 杠 出现。 在 
URL 字段 中 ,输入 javascript:alert('Hello World'); ( 见 图 17-7 )， 如 果 我 们 对 TE 分 配给 按钮 的 图 
标 满意 ( 它 往 往 是 当前 网 页 的 图 标 )， 那 么 单 击 OK. 

S. (可 选 ) 如 果 和 希望 改变 图 标 ， 那 么 单 击 Properties 对 话 框 中 的 Change Icon, Change Icon 对 话 框 
出 现 ( 见 图 17-8 )， 选 择 我 们 需要 的 图 标 ， 单 击 OK， 然 后 再 次 单 击 OK 关闭 Properties 对 话 框 。 


? [X 























Hello Properties 


General "Web Document General | Web Document | 





Hello 


LI 
Hello 


URL: javascript:alert(Hello World"); 


Change Icon 


Look for icons in this file: 


:\WINDOWS\system32\rl.dl 


Select an icon from the list below: 





Shortcut key: |None 





Visits: 61 














OK Cancel Apply 


图 17-7 1EIE 7 ff] Properties 对 话 框 中 添加 代码 ”图 17-8. ”如果 希 望 改 变 IE 分 配给 bookmarklet 的 图 
标 ， 那 么 使 用 Change Icon 对 话 框 

















6. 如 果 适 当地 设置 了 IE 的 安全 设置 , 那么 应 该 会 出 现 Problem with Shortcut 对 话 框 。 这 可 以 阻止 
恶意 脚本 被 添加 到 浏览 器 。 我 们 不 是 恶意 用 户 ( 至 少 不 会 针对 自己 的 计算 机 )， 所 以 一 切 都 没 问 题 。 
单 击 Yes 按钮 。 

7. 单 击 Links Toolbar 上 的 Hello 按钮 来 激活 命令 。 


=> 在 IE 8 或 IE 9 中 创建 bookmarklet 




















1. 在 Favorites 菜单 中 ， 选 择 Add to Favorites Bar, Add a Favorite 对 话 框 出 现 ( 见 图 17-9 )。 

2. 在 Name 字段 中 ， 输 入 Hello. 

3. 在 对 话 框 的 Create in 部 分 中 ,选择 Favorites Bar 文件 夹 以 确保 新 的 书签 出 现在 Favorites Toolbar 
中 ， 单 击 Add 按钮 。 





17 
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4. 右 击 Links Toolbar t3] “Hello” bookmarklet, 4 Properties, Properties 对 话 框 出 现 。 在 











URL 字段 中 ,输入 javascript:alert('Hello World'); ( 见 图 17-10 )， 如 果 我 们 对 TE 分 配给 按钮 的 图 











标 满意 〈 它 往往 是 当前 网 页 的 图 标 )， 那 么 单 击 OK 按钮 。 



































分 | Hello Properties 区 下 
| General | Web Document | Security |. Details | Previous Versions | 
Hello 
L2 
URL: javascriptzalert( Hello World’) 
Shortcut key: None 
Visits Unknown 
Change Icon... | 
Add a Favorite Ex 
Add a Favorite 
Add this webpage as a favorite. To access your favorites, visit the 
Favorites Center. 
Name Hello 
Create in Favorites Bar v] | New Folder | 
Favorites = 
E Favorites Bar 图 | 
Microsoft Websites 
MSN Websites OK Cancel 
Windows Live | | | | | Appy 




















图 17-9 下 8 及 其 后 续 版 本 中 又 有 一 点 差异 ， 图 17-10 再 次 修改 属性 ， 将 JavaScript 代码 

















这 里 是 Add a Favorite 对 话 框 





























添加 到 bookmarklet 





5. (可 选 ) 如 果 希 望 改 变 图 标 ， 那么 单 击 Properties 对 话机 





匡 中 的 Change Icon, Change Icon 对 话 框 


出 现 ， 选 择 我 们 需要 的 图 标 ， 单 击 OK 按钮 ， 然 后 再 次 单 击 OK 按钮 以 关闭 Properties 对 话 框 。 
6. 如 果 适 当地 设置 了 IE 的 安全 设置 ,那么 应 该 会 出 现 Problem with Shortcut 对 话 框 。 单 击 Yes 按钮 。 














7. 单 击 Links Toolbar 上 的 Hello 按钮 来 激活 命令 。 
V 提示 


























口 默认 情况 下 ，IE 9 会 隐藏 Favorites Bar。 要 显示 它 ， 需 右 击 窗口 顶部 的 工具 栏 ， 并 以 弹出 的 快 


捷 菜 单 中 选择 Favorites Bar. 





bookmarklet 5 IE 安全 性 
微软 Windows 的 IE 的 每 个 版 本 都 有 许多 安全 问题 ， 这 并 不 是 什么 秘密 。 微 软 以 各 种 各 样 的 方 
式 解决 这 些 问题 。Windows XP Service Pack 2 主要 致力 于 提高 整个 Windows， 包 括 IE 6( 顺 便 说 一 


向 ， 如 果 你 仍 在 使 用 IE-6， 建 议 你 立即 升级 ) 的 安全 性 。IE 


7 会 集成 更 多 的 安全 特性 ，IE 7 RAH 


划 在 Windows Vista 之 后 发 布 ， 但 是 Vista 的 发 布 日 期 多 次 推迟 ，]IE 7 提前 发 布 了 。Vista 增加 了 一 
些 安 全 特性 ， 正 8、Windows7 和 全 9 进一步 增强 了 安全 性 。 

我 们 的 测试 表明 ，bookmarklet 的 表现 在 各 版 本 之 间 是 不 一 致 的 。 我 们 发 现 ， 一些 bookmarklet 
只 能 在 某 些 页面 上 运行 ,还 有 一 些 bookmarklet 根本 无 法 运行 ,具体 情况 取决 于 在 E 中 启用 了 哪些 
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安全 设置 。 这 些 设置 包括 是 否 打 开 了 弹出 窗口 拦截 ， 以 及 Tools > Internet Options 的 Security 选项 
卡 中 的 许多 设置 。 简单 地 说 ,由 于 在 全 中 添加 了 更 多 的 安全 层 , bookmarklet 在 IE 中 运行 起 来 更 困 
难 了 。 通 过 修改 安全 设置 ， 可 能 会 使 更 多 的 bookmarklet 能 够 在 IE 中 运行 ， 但 是 因为 IE 在 安全 问 
题 方面 的 记录 很 糟糕 ， 我 们 不 建议 你 草率 地 修改 安全 设置 。 

我 们 的 建议 是 : 如 果 必 须 在 降低 TE 的 安全 程度 和 不 能 运行 bookmarklet 之 间作 出 选择 ,那么 不 如 改 用 
Firefox, Safari 或 者 Chrome。 这 会 解决 许多 浏览 器 安全 问题 ， 而 且 会 得 到 一 致 的 bookmarklet 功能 。 


17.2 ”改变 页 面 的 背景 颜色 


脚本 17-2 很 简单 , 但 是 功能 强大 。 你 是 否 遇 到 过 这 样 的 情况 : 你 访问 的 一 个 站 点 包含 许多 有 用 的 
信息 , 但 是 站 点 的 背景 颜色 与 文本 颜色 太 接 近 ， 以 致 信息 很 难 阅读 ?更 糟糕 的 情况 是 ， 页 面 的 作者 使 
用 很 刺眼 的 颜色 ， 使 你 的 眼睛 很 疲劳 。 这 个 小 小 的 bookmarklet 就 能 够 解决 这 些 问 题 。 注 意 ， 在 这 种 
情况 下 ， 是 使 用 bookmarklet 改变 你 查看 别人 页 面 的 方式 一 一 这 正 是 bookmarklet 的 特殊 之 处 。 当 然 ， 
它 不 会 改变 实际 的 页 面 ， 仪 仅 是 改变 浏览 器 显示 页 面 的 方式 。 


脚本 17-2 这 个 脚本 将 背景 颜色 改 为 白色 ， 它 会 大 大 改进 设计 不 当 的 页 面 的 显示 效果 
javascript: void(document.body.style.background='#FFF'); 
> 改变 页 面 的 背景 颜色 


































































































口 javascript: void(document.body.style.background='#FFF') ; 






























































这 个 脚本 使 用 document .body.style.background 对 象 并 且 将 它 重 新 设置 为 白色 。 现 在 ， 我 们 可 
以 清楚 地 看 到 页 面 上 的 文本 了 ， 如 图 17-11 和 图 17-12 所 示 。 
(& Mozilla Firefox fs) oR es] (& Mozilla Firefox Ee JE e] 
File Edit View History Bookmarks Tools Help File Edit View History Bookmarks Tools Help 
- 2 > xe HB [C] eos P G-- 2 3 -| 多 3* 党 [IG] Goes P 
& oO * 6 




















图 17-13. 在 页 面 原 来 的 背景 颜色 上 ， 文 本 很 难看 清楚 图 17-12 在 白色 背景 上 ,文本 清楚 多 了 


v 提示 
O 注意 ， 这 个 bookmarklet 使 用 了 javascript:void(command) ;形式 。 这 是 因为 bookmarklet 必须 




















AU» 


返回 某 个 值 ， 这 个 值 一 般 用 来 覆盖 当前 页 面 的 内 容 。 通 过 使 用 void() 方 法 ， 就 什么 也 不 返回 ， 
AAA a. 

O bookmarklet 使 用 单 引 号 ， 而 不 是 双 引 号 。 这 是 因为 在 幕后 每 个 bookmarklet 包含 在 一 个 <a 
href=""> 标 签 中 。 使 用 双 引 号 会 过 早 地 结束 bookmarklet。 
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17.3 改变 页 面 样式 


如 果 页 面 的 背景 颜色 是 在 页 面 的 HTML. 中 设置 的 , 那么 前 面 的 示例 会 起 作用 。 但 是 , 如 果 页 面 使 
用 样式 表 改 变 背景 颜色 或 者 在 页 面 元 素 上 使 用 背景 图 像 ， 那 么 这 个 bookmarklet 就 无 效 了 。 下 一 个 
bookmarklet ( 见 脚本 17-3 ) 会 更 换 页 面 背景 颜色 、 文 本 颜色 和 链接 颜色 的 CSS 样式 。 背 景 颜色 改 为 
和 白色， 文本 颜色 改 为 黑色 ， 链 接 是 蓝 色 的 ， 已 经 访问 过 的 链接 是 紫色 的 。 在 图 17-13 和 图 17-14 中 可 
以 看 到 这 些 变化 。 


(B) Welcome to HomeCock info! - Mozila Frefox ees) A) Welcome to HomeCock iol - Mazila Fretar = 
Hle Ed View Histon) Bookmarks Tools Help 
Meum SM By (Dntp/wwhomecookinfo/ ir =| [> Googie 2| 
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DC X A (htp/wwhomecookinfo/ Yt -] [SE oos >| 
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m - i 
> Wc 
à x». | i= HomeCook.info 


z wmm GOOD FOOD FOR BUSY PEOPLE 


Ww 















|i Mos Vite [C] Getting started ial LatestHesdines [C] Helo Word) White tet 
Welcome to HomeCookin‘o! bel 




















Friday, April 15 - 2011 


Welcome! 


Most people these cay 
































Done Done 


图 17-313 原来 的 页 面 比较 难以 阅读 ， 所 以 我 们 希望 17-14 通过 修改 背景 颜色 和 链接 颜色 ， 页 面 比 
改变 CSS 样式 ， 使 页 面 的 可 读 性 更 好 较 容 易 阅读 了 















































脚本 17-3 ”不 要 误解 箭头 的 意思 ， 它 们 并 不 表示 代码 中 有 换行 ， 而 是 因为 本 书 的 页 面 不 够 宽 。 请 记 
住 ， 实 际 的 bookmarklet 必须 在 一 行 上 。 这 个 bookmarklet 会 改变 页 面 的 样式 ， 使 页 面 的 
可 读 性 更 好 


javascript: (function(){var nuStyle-document.createElement('link');nuStyle.rel-'stylesheet'; 
—nuStyle.href='data:text/css,* {background:#FFF !important;color:#000 !important;} :link, :link * 
—{color:#00F !important;} :visited, :visited * {color:#93C !important;}';document. documentElement. 
—+childNodes[0].appendChild(nuStyle) ;})(); 


如 果 你 觉得 阅读 网 页 中 黑色 背景 上 的 白色 文本 有 困难 , 或 者 不 喜欢 站 点 对 链接 和 一 般 文本 使 用 太 
相似 的 颜色 ， 那 么 这 个 bookmarklet 正好 可 以 帮助 你 。 我 们 经 常 在 自己 的 日 常 Web 浏览 中 使 用 这 个 
bookmarklet。 再 次 提醒 你 ， 这 个 bookmarklet 只 是 改变 页 面 在 你 浏览 如 中 的 外 观 ， 而 不 会 改变 页 面 本 
身 。 实 际 上 ， 如 果 重 新 加 载 页 面 ， 它 会 重新 显示 为 原来 的 难以 阅读 的 样式 。 但 是 ， 通 过 使 用 这 个 
bookmarklet， 只 需 单 击 一 次 按钮 就 可 以 减轻 视觉 负担 。 
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=> 改变 页 面 样式 








1. javascript:(function(){ 
这 里 采用 一 种 新 的 形式 : 并 不 使 用 void() 向 浏览 器 返回 null 值 ， 而 是 把 整个 bookmarklet 放 在 一 
个 匿名 函数 中 。 
2. var nuStyle-document.createElement('link'); 
这 一 行 在 页 面 上 创建 一 个 新 的 link 元 素 ， 然 后 将 这 个 元 素 存 储 在 新 变量 nuStyle 中 。 
3. nuStyle.rel-'stylesheet'; 
这 一 行为 新 创建 的 链接 创建 一 个 新 的 rel 属性 ， 然 后 将 它 的 值 设置 为 'stylesheet'。 在 这 里 ，rel 
属性 告诉 浏览 需 我 们 要 链接 一 个 样式 表 。 
4. nuStyle. href='data:text/css,*{background:#FFF !important;color:#000 !important;j: 
—link,:link * {color:#00F!important;} :visited, :visited* {color:#93C !important;}'; 
这 一 行为 新 创建 的 link 元 素 添 加 一 个 新 的 href 属性 ， 并 且 设置 我 们 希望 给 页 面 添加 的 样式 : 背 
景 是 白色 的 , 文本 是 黑色 的 ,链接 是 蓝 色 的 , 已 经 访问 的 链接 是 紫色 的 。!important 使 这 些 规 则 覆盖 
所 有 其 他 样式 ，* 表 示 这 些 新 样式 应 用 于 页 面 上 的 所 有 元 素 。 
5. document . documentElement.childNodes[0].appendChild(nuStyle); 
这 一 行将 新 的 链接 元 素 插 入 网 页 ， 让 新 样式 生效 ， 使 页 面 的 可 读 性 更 强 。 
6. })()3 
这 里 结束 上 面 创建 的 匿名 函数 ( } )， 然 后 结束 函数 包装 器 ( ) )， 后 面 的 () 只 是 为 了 表示 这 个 函数 
已 经 结束 并 让 浏览 器 马上 运行 它 。 
V 提示 
口 看 起 来 这 里 的 代码 太 复 杂 了 ， 仅 仅 为 了 避免 void() 似 乎 不 值得 。 但 是 ， 这 是 很 有 意义 的 : 
JavaScript 认为 bookmarklet 是 在 当前 页 面 内 运行 的 ; 如 果 采 用 原来 的 方式 , 就 无 法 确保 页 面 本 
身 并 未 使 用 bookmarklet 中 的 变量 。 如 果 把 整个 bookmarklet 放 在 一 个 函数 中 , 变量 就 处 于 函数 
的 范围 内 (参见 第 2 章 )， 可 以 避免 变量 冲突 。 
O 正如 在 本 章 开头 提 到 的 ， 一 个 bookmarklet 只 能 有 一 行 代码 。 在 语句 之 间 放 上 分 号 ， 就 能 够 将 
所 有 命令 放 在 一 行 上 。 


17.4 查询 单词 


如 果 使 用 Web 浏览 器 进行 写作 ( 尤其 是 写 邮 件 )， 你 会 希望 有 大 多 数字 处 理 程序 中 的 字典 和 词典 
工具 。 通 过 脚本 17-4、 脚 本 17-5 和 脚本 17-6， 就 能 够 在 所 有 写作 工作 中 具备 这 种 功能 。 我 们 将 使 用 
bookmarklet 查询 在 线 字典 或 词典 。 因 为 脚本 非常 相似 ,所 以 我 们 在 同一 节 中 一 起 介绍 它们 。 脚本 17-4 
演示 如 何在 Safari 和 Firefox 中 进行 字典 查询 ， 脚 本 17-5 在 I 下 中 进行 字典 查询 ， 脚 本 17-6 演示 如 何 
在 Safari 和 Firefox 中 进行 词典 查询 。 因 为 代码 实际 上 与 脚本 17-5 相同 ， 所 以 我 们 省 略 了 在 TE 中 进行 
词典 查询 的 脚本 ， 相 信 你 能 够 知道 该 怎么 做 。 
脚本 17-4 这 个 bookmarklet 在 Safari 和 Firefox 中 执行 字典 查询 


javascript: (function(){var inText=window.getSelection()+'';if(!inText){inText=prompt('Word:','');} 
—if(inText)(window.open(' http: //www. answers .com/'+escape(inText)+'#Dictionary' , 'dictWin', 'width=650, 
—height=600, left=75, top=175, scrollbars=yes' );}})(); 
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脚本 17-5 ”这 个 脚本 在 TE 中 进行 字典 查询 


javascript: (function(){inText=document.selection.createRange().text;if(!inText){inText=prompt('Word:','') 
—;}if (inText) {window. open('http://www. answers.com/'+escape(inText)+'#Dictionary', 'dictWin', 'width=650, 
—height=600, left=75, top=175, scrollbars=yes');}})(); 

脚本 17-6 ”这 个 bookmarklet TE Safari 和 Firefox 中 执行 词典 查询 


javascript: (function(){var inText=window.getSelection()+'';if(!inText){inText=prompt(‘Word:','');} 
—if(inText){window. open('http: //www.answers.com/'+escape(inText)+'#Rogets Thesaurus d','thesWin', 
— 'width=650, height=600, left=75, top=175, scrollbars=yes' );}})(); 


1. var inText=window.getSelection()+''; 
或 者 
inText=document.selection.createRange().text; 
代码 将 使 用 上 面 两 行 之 一 。 后 者 适用 于 下 ,前 者 适用 于 Safari 和 Firefox。 这 一 行 创 建 一 个 新 变量 
E d ecd ies 
,在 第 一 行 中 , 最 后 是 两 个 单 引号 ， 而 不 是 一 个 双 引 号 。 这 么 做 是 因为 Safari 和 Firefox 可 能 
从 而 可 以 将 结果 转换 为 字符 串 。 
2. if(linText)(inText-prompt('Word:','');) 
如 果 没 有 选择 任何 文本 ， 则 提示 用 户 输入 要 查询 的 单词 。 
3. if(inText){ 
用 户 有 了 两 次 机 会 ， 所 以 他 们 应 该 已 经 输入 了 要 查询 的 单词 。 即 使 如 此 ， 我们 还 是 在 执行 查询 之 
前 进行 检查 。 
4. window. open('http://www.answers.com/' +escape(inText)+' #Dictionary','dictWin', 
‘width=650, height=600, left=75, top=175, scrollbars=yes' ) ; } 


或 者 


ee ee he #Rogets_ Thesaurus d,'thesWin', 
‘width=650, height=600, left=75, top=175, scrollbars=yes' ) 


根据 是 要 进行 字典 查询 还 是 词典 查询 ， 选 择 这 两 段 代码 之 一 ， 17-15 和 图 17-16 所 示 。 它 们 
都 打开 一 个 新 窗口 ， 其 中 显示 我 们 请 求 的 信息 。 可 以 通过 改变 window.open() 调 用 的 height 和 width 
属性 ， 改 变 窗口 的 尺寸 来 适应 自己 的 屏幕 。 


ADS, ‘chalcedony: Definition fram Answers.com. 


Answers.com: iñ e.arre! 
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chalcedony 


chalcedony 








图 17-15 触发 字典 bookmarklet 就 会 返回 显示 查询 结果 的 窗口 
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eno wacky: Definition, Synonyms from Answers.com 

















Roget's Thesaurus: wacky Top 


Home > Library > Literature & Language > Thesaurus 
also whacky 








Antonyms by Answers.com: wacky Top 


Home> Library > Literature & Language > Antonyms 





adj 


Definition: acting 
Antonyms: caim, collected 


Word Tutor: whacky Top 














3 


图 17-16 词典 查询 的 结果 





IN BRIEF: adj. - Informal or slang terms for mentally irregular; Ludicrous, foolish. 





V 提示 
O AES JavaScript 没什么 关系 , 但 是 有 一 点 很 有 意思 , 值得 注意 : 如 果 使 用 运行 Mac OS X 10.4 
或 更 高 版 本 的 Mac BL, 那么 在 Safari 或 许多 其 他 程序 中 ， 可 以 将 鼠标 指针 放 在 一 个 单词 上 , 并 
且 按 Cmd-Ctrl-D ,操作 系统 就 会 利用 Dictionary 应 用 程序 弹出 一 个 字典 /词典 窗口 ( 见 图 17-17 )。 
这 在 任何 基于 Cocoa 的 程序 中 都 有 效 ， 所 以 如 果 在 Mac 上 使 用 Firefox， 就 没有 这 种 功能 ( 倒 
霉 )。 如 果 你 不 知道 “基于 Cocoa 的 程序 ”是 什么 意思 ， 则 不 必 担 心 ， 在 你 所 用 的 程序 中 试 试 





























这 种 功能 就 行 了 。 
new feature that provides you with a 
AAAA look at what's running on 
|,kampri‘hensiv| view of 
adjective 0 and full- 
1 complete; including all or nearly all h 

elements or aspects of something 

2 of or relating to understanding. 1 out to 
noun (in full comnrehensive school) "| your 
Dictionary v sis lore. 
pen viae: umbnails 

















图 17-17 在 Mac OSX 中 ， 内 置 了 一 个 字典 和 词典 


为 什么 代码 不 一 样 
为 什么 要 为 不 同 浏览 器 提供 代码 的 不 同 版 本 ? 与 往常 一 样 , 原因 是 微软 坚持 按照 自己 的 方式 做 
F, 而 不 是 按照 公认 的 Web 标准 。 由 于 浏览 器 的 DOM 之 间 的 差异 ,必须 编写 不 同 的 代码 才能 在 不 
同 的 浏览 器 中 产生 相同 的 结果 。 这 迫使 无 论 何 处 的 开发 人 员 要 做 更 多 原本 不 必要 的 工作 。 这 真是 令 
AIR! 


17.5 查看 图 像 


对 于 设计 人 员 有 帮助 的 一 种 功能 是 ,脱离 页 面 的 布局 , 查看 页 面 上 的 所 有 图 像 。 脚 本 17-7 可 以 探 
察 别人 的 页 面 , 并 且 显 示 页 面 上 的 各 个 图 像 、 图 像 ( 在 现代 浏览 器 中 ) 的 高 度 和 宽度 以 及 它们 的 URL, 
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脚本 17-7 可 以 用 这 个 脚本 查看 页 面 图 像 表 格 


javascript: (function(){var iWin,i,t='',di=document.images;for(i=0;i<di.length;i++){if(t.index0f(di[i].src) 
—><0){t+='<tr><td><img src='+di[i].src+'/></td><td>'+di[i] .height+'</td><td>'+di[i] .width+'</td><td>'+ 
—di[i].src+'</td></tr>'; }}if(t==''){alert('No images!');}else{iWin=window.open('', 'IW', 'width=800, 
—height=600, scrollbars-yes');iWin.document.body.innerHTML-'«table border=1 cellpadding=10 cellspacing=0> 
—<tr><th>Image</th><th>Height</th><th>wWidth</th><th>URL</th></tr>'+t+'</table>' ;}})(); 


1. var iWin,i, t = '',di=document. images; 

这 个 bookmarklet 首先 对 4 个 变量 进行 初始 化 : iWin, i, t ( 它 以 后 将 包含 所 有 输出 ) 和 di CE 
包含 document. images 对 象 )。 

2. for (i=0;i<di.length;i++){ 

现在 对 文档 中 的 每 个 图 像 进行 遍历 。 

3. if(t.indexOf(di[i].src)<o){ 

在 这 一 步 中 ， 检 查 是 否 已 经 将 图 像 放 在 页 面 上 了 。 这 行 代码 防止 一 个 图 像 出 现 一 次 以 上 。 

4. t + ='<tr><td><img src='+di[i].src+'/></td><td>'+di[i] .height+'</td> 

> «td»'«di[i].width +'</td><td>'+di[i].src+'</td></tr>' ;}} 

我 们 需要 的 所 有 信息 都 在 这 里 以 漂亮 的 表格 格式 写 出 。 第 一 个 单元 格 包 含 图 像 ， 第 二 个 单元 格 包 
含 高 度 ， 第 三 个 包含 宽度 ， 最 后 一 个 包含 图 像 的 URL。 

5. if(t==''){ alert('No images!');} 

当 循环 完成 时 , 检查 是 否 已 经 找到 了 任何 图 像 。 如果 没有 找到 任何 图 像 , 那么 显示 一 个 警告 
向 用 户 显 示 “No images!”。 

6. else{iWin=window.open('','IW','width=800,height=600, scrollbars=yes'); 

如 果 找 到 了 图 像 ， 就 打开 一 个 新 窗口 来 显示 图 像 信息 。 


7. iWin.document.body.innerHTML-'«table border=1 cellpadding=10 cellspacing=0><tr><th>Image 
«/th»«th»Height«/th»«th»Width«/th»«th»URL«/th»«/tr»'«te'«/table»';] 


这 里 创建 和 显示 新 窗口 。 图 像 信息 以 及 每 列 的 标题 信息 被 写 出 ， 效 果 见 图 17-18. 
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LI 
















































































17.6 显示 ISO Latin 字符 


如 果 你 手工 编写 网 页 , 要 记 住 像 4 和 这 样 的 不 同 字 符 的 编码 是 不 容易 的 。 脚本 17-8 可 以 显示 常 
用 的 元 音字 母 变 体 。 


脚本 17-8 不 必 在 书 中 查找 加 重音 的 字符 ， 可 以 让 JavaScript 在 需要 时 生成 列表 


javascript: (function(){var eWin,n,i,j,w,t-'«table border=1 cellpadding=20 cellspacing-0»', l-document. 
—createElement('p'),v='aAeEiIoOuUyY',s=new Array('acute','circ','elig','Elig', 'grave','ring','slash', 
—"'tilde','uml');for(isz0;i«v.length; i--)(for(j-0;j«s.length; j++){w=v.charAt(i)+ s[j]+';';1.innerHTML= 
—>'&'+w;n=1. innerHTML; if(n.length==1){t+='<tr><td>&'+wt'</td><td>&amp; '+w+'</td><td>8amp;#'+n.charCodeAt (0) 
—' 3«/td»«/tr»' ; )) JeWin-window.open(' ' ,' EW' ,'scrollbars-yes,width-300, height='+screen.height) ; 
—eWin.document. body. innerHTML=t+'</table>';})(); 
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Image Height | Width URL 





320 | 400 | htp:/www pixel. mu/images/pixel3.jpg 





Aren't | just the cutest cat ever? 





320 | 400 | http/www.pixel. mulimages/pixel4.jpg 








You will buy me sashimi. Now. 





























17-18 ”这 个 脚本 将 图 像 和 信息 显示 在 一 个 吸引 人 的 表格 中 


> 显示 ISO Latin 字符 








1. var eWin,n,i,j,w,t-'«table border=1 cellpadding-20 cellspacing=0>' ,1=document. 
—createElement('p'), 


这 个 bookmarklet 首先 对 4 个 变量 进行 初始 化 。 

2. vz' aMeEiloOuUyY', 

对 字符 串 v 进行 初始 化 ， 其 中 包含 所 有 元 音字 母 。 

3. s=new Array('acute','circ','elig','Elig','grave', 'ring','slash', 'tilde','uml'); 

这 是 一 个 数组 s， 其 中 包含 所 有 可 区 别 的 字符 编码 。 

4. for(i=0; i<v. length; i++) { 

这 一 行 用 i 循环 遍历 v 字 符 串 中 的 字符 。 

5. for(j=0;j<s.length;j++){ 

这 一 行 用 j 38 s 数组 。 

6. w=v.charAt(i)+s[j]+';'; 

在 这 一 行 中 ， 将 变量 w 设 置 为 元 音字 母 加 上 编码 ， 后 接 分 号 。 

7. 1.innerHTML='&'+w;n=1.innerHTML; 

对 于 下 一 个 步骤， 我 们 不 需要 实体 的 字符 串 表 示 ， 而 是 需要 实体 本 身 一 一 也 就 是 说 ， 需 要 i 而 不 
是 &atilde;。 可 以 获取 前 一 步 中 设置 的 字符 串 w， 在 前 面 加 上 8& 符 号， 然后 放 在 已 经 创建 的 元 素 1 的 
innerHTML 中 。 这 会 把 实体 的 字符 串 值 转换 为 显示 的 值 。 为 了 使 用 这 个 值 ， 把 变量 n 设置 为 同一 个 
innerHTML 的 内 容 。 

8. if(n.length==1) 

为 了 获得 所 有 可 能 的 实体 ,我 们 的 元 音 和 重音 字符 列表 包含 一 些 无 效 的 组 合 。 如 果 前 面 的 转换 步 
又 实际 上 没有 转换 我 们 的 字符 串 ， 就 说 明 这 是 无 效 的 组 合 。 例 如 ，8aelig; 转 换 为 PP，8Aacutej; 转 换 为 
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A; 但 是 ，8Aelig; 不 是 有 效 的 实体 ( 尽管 它 看 起 来 应 该 转换 为 — zem 
E)， 所 以 前 一 步 不 会 转换 它 ， 结 果 仍 然 是 一 个 7 字符 的 字符 d 
串 。 有 效 的 实体 最 终 会 产生 一 个 1 字符 的 字符 串 ， 并 执行 后 20) aga roe 
面 的 代 但 9 à &acirc; &#226; 
9. {t+='<tr><td>&' +wt+'</td><td>&'+' amp; '+w+' 
—«/td»«td»&' *' amp;#'+n.charCodeAt(0)+' ; æ | &aeli: &#230; 
</td></tr>" ;} 
我 们 已 经 获得 了 一 个 有 效 的 实体 ， 现 在 要 把 它 放 到 表格 ubt dd ei 
中 。 表 格 的 第 一 列 显示 实体 本 身 ， 第 二 列 显示 字符 串 表 示 ， à | aang | aem 
第 三 列 显示 数字 表示 。 最 后 一 个 值 是 通过 在 实体 上 使 用 L 







































































charCodeAt () 方 法 获得 的 。 e aoe bunk 
10. eWin-window.open('', 'EW' ,'scrollbars-yes, à | Rami &228; 
—widthz300,heightz'-*screen.height);ellin. 
document . body. innerHTML=t+'</table>' ; Á | &Aacute. | 2193: 
完成 之 后 ， 打 开 一 个 新 窗口 ， 然 后 把 表格 写 到 窗口 中 ， 
见 图 17-19, A &Acirc; &#194; 
w 提示 Æ &AElig; &2198; 
Q 这 个 示例 的 表格 很 长 ， 所 以 在 处 理 打开 窗口 的 高 度 "RN es 
时 ,使 用 了 一 个 小 技巧 。 并 不 为 窗口 指定 固定 的 高 
度 ， 而 是 根据 用 户 的 显示 带 高 度 设置 窗口 高 度 。 如 人 
果 你 不 希望 这 样 ， 可 以 把 它 设置 为 固定 的 大 小 。 rae on | aos. 
O Æ 的 HTML 实体 是 &AElig; 一 一 也 就 是 说 ， 需 要 大 写 
的 卫 ， 而 不 是 小 写 的 e。 现 在 你 可 以 体会 到 这 样 的 ai cmd ee 
bookmarklet 是 多 么 方便 了 。 E | deas | as 





17.7 ”将 RGB 值 转换 为 十 六 进 制 | 


另 一 个 对 于 Web 开发 人 员 有 帮助 的 小 工具 是 RGB 到 十 六 ul Fea 
进 制 的 转换 器 。 当 需要 将 来 自 图 形 程序 ( 比如 Adobe Photoshop 
或 者 Fireworks ) 的 颜色 值 转换 为 浏览 器 颜色 值 时 ， 以 用 作 页 。 图 17-19 这 个 脚本 的 结果 是 一 个 以 
























































面 背景 或 文本 的 颜色 ， 这 会 非常 有 用 。 脚 本 17-9 演示 如 何 用 Pn T 
JavaScript 编写 转换 计算 器 并 且 将 代码 转换 为 bookmarklet。 eae 




















脚本 17-9 这 个 脚本 接受 RGB 颜色 值 ， 并 且 将 它们 转换 为 等 同 的 十 六 进 制 值 


javascript: (function(){var s,i,n,h='#' ,x='0123456789ABCDEF' ,c=prompt('R,G,B:','');if(c){s=c.split(','); 
—for(i=0; i<3;i++){n=parseInt(s[i]) ;h+=x.charAt(n>>4)+x.charAt(n&15) ; }prompt('Hexcolor:',h);}})(); 


> 将 RGB 值 转换 为 十 六 进 制 








1. var s,i,n,h='#', 
这 个 bookmarklet 首先 对 4 个 变量 进行 初始 化 。 





17.8 ”对 值 进行 转换 341 





2. x2'0123456789ABCDEF ' , 
变量 x 被 设置 为 有 效 的 十 六 进 制 值 。 
3. c=prompt('R,G,B:',''); 
这 一 行 提示 用 户 输入 所 需 的 RGB 值 ( 以 逗号 分 隔 )， 如 图 17-20 所 示 。 
4. if(c){ 
如 果 用 户 输入 了 任何 内 容 ， 就 继续 执行 代码 。 和 否则 ，c 的 值 就 是 null, bookmarklet 跳 过 后 面 所 有 
的 步骤。 
5. s=c.split(','); 
FES c 中 的 内 容 ， 并 且 将 结果 放 进 s 数组 中 。 
6. for(i=0;i<3;i++){ 
对 于 红色 、 绿 色 和 蓝 色 值 ， 循 环 执行 以 下 代码 。 
7. n=parseInt(s[i]); 
将 s 的 当前 元 素 转换 为 数字 ， 并 且 将 它 保存 为 n。 
8. h+=x.charAt(n>>4)+x.charAt(n&15); 
这 一 行将 n 转换 为 两 个 十 六 进 制 数字 ， 并 且 将 结果 添加 到 h 中 。 
9. prompt('Hexcolor:',h); 
通过 提示 命令 显示 结果 (准备 将 它 复制 进 HTML smi), Af 17-21 所 示 。 采 用 这 种 做 法 而 不 是 
用 警告 对 话 框 ， 这 样 就 可 以 以 后 复制 并 且 粘 贴 代 码 。 
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m http://dl.dropbox.com - http://dl.dropbox.com 
R,G,B: Hexcolor: 
100, 150, 200 #6496C8 




















图 17-20 ”这 个 脚本 的 第 一 部 分 提示 用 户 输入 RGB 值 ”图 17-21 另 一 个 提示 框 提 供 了 计算 出 的 十 六 进 制 值 


17.8 ”对 值 进行 转换 


值 可 以 从 一 种 类 型 转换 成 其 他 各 种 可 能 的 类 型 。 脚 本 17-10 仅仅 演示 一 个 示例 : 如 何 将 公里 数 转 
换 为 英里 数 。 
脚本 17-10 PTEI bookmarklet 来 执行 几乎 任何 类 型 的 单位 转换 。 这 个 脚本 将 公里 数 转换 为 英里 数 


javascript: (function(){var t,expr-prompt('Length in kilometers:','');if(isNaN(parseFloat(expr))){t=expr+' 
一 is not a number';}else{t='Length in miles is '4Math.round(expr*6214)/10000; }alert(t);})(); 


p^ 将 公里 数 转换 为 英里 数 
1. vax t, expr=prompt('Length in kilometers:',''); 


这 个 bookmarklet 首先 提示 用 户 输入 以 公里 为 单位 的 长 度 CLER] 17-22 )。 
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2. if(isNaN(parseFloat(expr))) 

检查 用 户 是 否 输入 了 数字 值 。 

3. {t=expr+' is not a number';j 

如 果 没 有 输入 数字 值 ， 则 弹出 错误 消息 。 

4. else{t='Length in miles is'4Math.round(expr*6214)/10000;] 

否则 ， 将 值 转换 为 英里 数 并 且 将 它 存储 在 + 中 。 

5. alert(t); 

无 论 输 入 值 如 何 ， 我 们 将 转换 结果 存储 在 t 中 ， 结 果 显示 如 图 17-23 所 示 。 




















zi 









































The page at http://dl.dropbox.com says: 








The page at http://dl.dropbox.com says: 





o Length in kilometers: 





1 Length in miles is 62.14 
100 cad 





Cancel | 















































E1722 首先， 要求 用 户 输入 要 转换 的 数字 图 17-23 JavaScript 返回 转换 的 结果 
v 提示 





口 改写 这 个 脚本 来 执行 所 需 的 任何 转换 都 是 很 简明 的 。 只 需 改变 步骤 1 中 的 标签 ,并 且 将 步骤 4 
中 的 数学 表达 式 蔡 换 为 所 需 的 转换 的 适当 表达 式 。 

Q 可 以 建立 一 批 执行 不 同 转 换 的 bookmarklet， 将 它们 组 织 在 Bookmarks 或 Favorites 菜单 中 的 文 
件 夹 中 。 然 后 就 可 以 通过 鼠标 单 击 进行 转换 。 

















17.9 bookmarklet 计算 器 


如 果 你 考虑 一 下 ,会 觉得 只 用 一 长 行 代码 建立 一 个 完全 成 熟 的 计算 器 是 非常 困难 的 。 但 是 ,可 以 使 
用 脚本 17-11 这 样 的 bookmarklet， 利 用 表 17-1 中 描述 的 JavaScript 内 置 Math 函数 来 执行 相当 复杂 的 计 
T. 


脚本 17-11 可 以 用 这 个 bookmarklet 进行 相当 复杂 的 计算 


javascript: (function(){var evl,expr=prompt('Formula...(eg: 2*3 + 7/8)','');with(Math)try(evl-parseFloat 
—(eval(expr));if(isNaN(evl))(throw Error('Not a number!');}prompt('Result of '+expr+':',evl);}catch(evl) 


































































































—(alert(ev1);)))O; 
$ 17-1 JavaScript 的 Math 函数 
函 数 描述 
abs 绝对 值 
sin, cos, tan 标准 三 角 函 数 ， 参 数 以 弧度 为 单位 
acos、asin、atan 反 削 数 ， 返 回 值 以 弧度 为 单位 
exp. log 间 数 和 自然 对 数 ， 以 e 为 底 
ceil 返回 大 于 等 于 参数 的 最 小 整数 
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CER) 
E A 描 X 
floor 返回 小 于 等 于 参数 的 最 大 整数 
min 返回 两 个 参数 中 比较 小 的 一 个 
max 返回 两 个 参数 中 比较 大 的 一 个 
pow 圭 ， 第 一 个 参数 是 底 ， 第 二 个 参数 是 指数 
round 将 参数 取 整 到 最 接近 的 整数 
sqrt 平方 根 


= 使 用 JavaScript 计算 器 








1. var evl,expr=prompt('Formula...(eg: 2*3 + 7/8)',''); 

这 一 行 设置 了 一 个 变量 evl, 然后 提示 用 户 输入 一 个 表达 式 或 公式 ( 如 图 17-24 所 示 ), 将 它 存储 
在 expr 中 。 

2. with(Math)try{ 

下 面 几 行 需要 使 用 JavaScript 内 置 的 Math 例 程 进行 运算 。with(Math) 这 一 行 告诉 解释 器 ， 当 看 到 
这 些 函 数 时 ， 应 该 将 它们 作为 Math 命令 对 待 。 

try() Zr JavaScript， 我 们 将 要 做 的 事情 可 能 会 失败 ， 如 果 出 现 问题 ， 不 要 惊慌 。 实 际 上 ， 如 果 
出 现 问题 ，JavaScript 甚至 不 必 弹 出 错误 消息 ， 因 为 我 们 要 自己 处 理 错误 。 

3. evl=parseFloat(eval(expr)); 

计算 表达 式 ， 将 结果 转换 为 浮 点 数 ， 然 后 存储 在 evl 中 。 

4. if(isNaN(evl)) 

如 果 evl 中 的 值 不 是 数字 ( NaN )， 那 么 执行 下 一 行 。 

5. {throw Error('Not a number! ');} 

如 果 执 行 到 这 里 ， 就 说 明 由 于 某 种 原因 ， 用 户 输入 的 内 容 无 法 计算 出 数字 。 当 发 生 这 种 情况 时 ， 
我 们 希望 显示 错误 消息 “Not anumber!"”。 这 里 设置 这 个 消息 ， 它 将 在 步骤 7 中 显示 。 

6. prompt('Result of '+expr+':',evl); 

和 否则， 表达 式 就 是 有 效 的 ， 所 以 显示 计算 结果 ， 如 图 17-25 所 示 。 
















































































Explorer User Prompt x= Explorer User Prompt [一 一 | 
Script Prompt Script Prompt Lox] 
Fomuia.. (eg: 2°3 + 7/8) um Result of sq 23). EE 
feal [4795831523312719 

图 17-24 ”提示 用 户 必须 输入 一 个 公式 图 17-25 JavaScript 返回 计算 结果 





7. }catch(evl){alert(ev1) ; } 

这 里 是 步骤 2 开始 的 try{} 块 的 末尾 。 如 果 到 达 这 里 ， 就 是 发 生 了 两 种 情况 之 一 : 要 么 是 在 步 又 
5 中 遇 到 了 错误 , 或 者 是 发 生 了 其 他 错误 。 无 论 是 哪 种 情况 ,我 们 都 “捕获 抛 出 的 错误 ”， 并 且 将 它 放 
在 屏幕 上 的 警告 框 中 。 
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V 提示 
O 还 记得 try/throw/catch 语法 的 意义 吗 ? 我们 在 2.11 节 中 最 先 讨论 过 这 些 语法 。 





17.10 ”缩短 URL 


由 于 许多 原因 ， 可 能 希望 获得 更 短 的 URL 版 本 ， 比 如 你 可 能 正在 使 用 与 Twitter 相似 的 服务 ， 它 
对 字符 数量 有 限制 ， 或 者 要 把 结果 粘贴 到 电子 邮件 中 而 且 不 希望 它 换行 。 无 论 由 于 什么 原因 ， 脚 本 
17-12 都 可 以 提供 更 简单 的 URL。 


=> 缩 短 URL 



































window.open( ‘http: //tinyurl.com/create.php?url='+location.href,'', 'width=750, height=500, scrollbars-yes'); 

这 里 打开 一 个 新 窗口 并 使 用 TinyURL.com 服务 设置 短 URL。 我 们 向 这 个 服务 传递 当前 页 面 位 置 
(location.href) ， 这 就 是 它 需 要 的 所 有 信息 。TinyURL.com 会 立即 把 缩短 的 URL 放 到 你 的 剪贴 板 中 ， 
所 以 只 需 访问 正确 的 网 页 ， 单 击 这 个 bookmarklet， 看 看 打开 的 页 面 是 否 一 切 正常 ( 见 图 17-26 ) , X 
闭 它 ， 然 后 把 新 的 URL 粘贴 到 所 需 的 任何 地 方 。 


脚本 17-12 只 需 单 击 一 次 鼠标 (和 这 个 脚本 ) ， 就 可 以 缩短 这 些 URL 


javascript: (function(){window. open(‘http://tinyurl.com/create.php?url='+location. href,'', 'width=750, 
—height=500, scrollbars=yes');})(); 


















































Your source for JavaScript & Ajax scripts, 
information, and more 

















图 17-26 许多 地 方 需要 更 短 的 URL 版 本 ,这 个 bookmarklet 可 以 很 方便 地 提供 短 的 URL 
提示 
a 网 上 有 许多 不 同 的 URL 缩短 服务 .如 果 你 不 喜欢 TinyURL.com, 可 以 试 坛 bitly ~ goo.gl 或 is.gd。 
O 如 果 你 也 在 Twitter 上 ， 请 和 我 们 打 个 招呼 ， 我 们 的 用 户 名 是 @negrino 和 @dori。 


17.11 检验 页 面 


在 创建 页 面 时 , 最 好 确保 页 面 符 合 Web 标准 。 这 样 的 页 面 在 现代 浏览 器 中 装载 得 更 快 , 而且 更 容 
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易 维护 。 对 页 面 进行 代码 有 效 性 检查 的 最 容易 的 方法 是 ， 通 过 W3C 维护 的 页 面 检验 器 
( http://validator.w3.org ) 运行 它 。 脚 本 17-13 所 示 的 bookmarklet， 检 查 当 前 在 浏览 器 中 显示 的 页 面 的 
有 效 性 。 实 现 方法 是 ,获得 当前 页 面 的 URL, 将 它 传递 给 检验 器 ， 然 后 打开 一 个 显示 检验 需 结果 的 新 
窗口 ， 如 图 17-27 所 示 。 


脚本 17-13 ”使 用 这 个 脚本 确保 页 面包 含 符合 Web 标准 的 有 效 的 标记 


javascript: (function(){window. open('http://validator.w3.org/check?uri='+location.href,'', 'width=800, 
—height=900, resizable=yes, scrollbars=yes');})(); 
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[Valid] Markup Validation of http://www.dori.com/ - W3C Markup Validator 








JumpTo: ^ Congratulations: Icons 


This document was successfully checked as XHTML 1.0 
Transitional! 


lesult Passed 





Address: ^ [http://mw.dori.con/ 


Encoding:  iso-8859-1 





Doctype: XHTML 1.0 Transitional — ((detect automaticaly) 





Dori. /mith 


Root Element: nimi 














图 17-27 ”通过 W3C 检验 器 运行 你 的 页 面 ， 如 果 页 面 编写 得 正确 ， 就 会 返回 让 人 满意 的 结果 


=> 检验 页 面 


C] window.open('http://validator.w3.org/check?uri-'-4window.location.href,'', 'widthz800,h 








eight-900,resizable-yes,scrollbars-yes'); 

这 个 bookmarklet 很 有 用 ， 而 且 并 不 复杂 。 首 先 ， 打 开 一 个 窗口 ， 并 且 将 检验 器 的 URL 传递 给 这 
个 窗口 。 你 会 注意 到 ， 检 验 器 有 一 个 参数 uri， 它 接受 当前 页 面 的 URL， 即 window.location. href. 
两 者 之 间 的 加 号 将 位 置 对 象 与 检验 器 的 URL 拼接 起 来 。 这 一 行 的 其 余部 分 仅仅 是 窗口 大 小 和 其 他 属 
性 的 一 些 参 数 。 


17.12 通过 电子 邮件 发 送 页 面 


在 网 上 冲浪 时 ， 有 时 候 会 发 现 一 个 页 面 非常 有 用 ， 需 要 与 同事 分 享 或 者 很 和 9 趣 ，, 希望 与 好 朋友 
分 享 。 这 个 bookmarklet ( 见 脚本 17-14 ) 获取 用 户 当 前 所 处 的 页 面 ， 加 上 突出 显示 的 文本 ， 使 用 这 些 
内 容 创 建 一 个 新 的 电子 邮件 。 


脚本 17-14 ”如 果 和 希望 通过 电子 邮件 把 一 个 网 页 的 所 有 内 容 或 一 部 分 内 容 发 送 给 别人 ， 使 用 这 个 
bookmarklet 是 最 简单 的 方法 


javascript: (function(){location.href='mailto: ?SUBJECT='+document.title+' &BODY='+escape(location.href)+'\r 
—+"+window.getSelection();})(); 
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第 173 bookmarklet 





> 通 过 电子 邮件 发 送 网 页 








QO location. href='mailto: ?SUBJECT='+document.title+' &BODY='+escape(location.href)+'\r'+ 
— window. getSelection(); 


如 果 你 以 前 在 网 页 上 添加 过 mailto 链接 ， 就 应 该 认识 这 种 语法 。 这 行 代 码 的 作用 相当 于 单 击 <a 


href='mailto:'></a> 链 接 。 电 子 邮 件 的 主题 设置 为 当前 文档 的 标题 





前 选择 的 文本 ， 见 图 17-28。 








图 17-28 
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JavaScript World :: JavaScript & Ajax Scripts and Information 


， 邮 件 体 设置 为 








页 面 的 URL 和 当 
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Check spelling w 
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many resou 
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ing JavaScript World, where you 
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Besides the scripts, we al 
‘Articles to our book's readers. If a 
UU Der find useful information al 
to Learn More section of tl 
BEES | 
JAVASCRI 
需 一 次 单 击 就 会 打开 一 个 新 
tin ~ETA l9 窗口 


程序 ， 它 就 会 打开 并 创建 邮件 。 


17.13 ”改变 页 面 大 小 


在 开发 网 站 时 ,能 够 看 看 页 面 在 更 小 的 显示 屏 


不 必 非 使 月 











把 浏览 絮 和 窗口 修 改 为 640 x 480。 


脚本 17-15 ”如 果 希 望 看 看 页 面 在 采用 男 一 种 大 小 时 效果 如 何 ,使 用 这 样 的 bookmarklet 会 














javascript: (function(){resizeTo(640,480);moveTo(0,0);})(); 


> 改变 页 面 大 小 


， 其 中 已 经 设置 了 邮件 的 基 





本 元 素 





O 因为 这 里 使 用 window.getSselection() ， 所 以 这 个 bookmarklet 在 IE 中 无 法 正常 工作 。 需 要 按 
照 17.4 节 中 的 方法 修改 它 。 


口 对 于 这 个 bookmarklet, H Gmail 或 Web mail。 只 要 计算 机 上 设置 了 默认 的 邮件 客户 





幕 上 的 效果 很 有 用 。 这 个 bookmarklet( 见 脚本 17-15 ) 


会 很 方便 








口 resizeTo(640, 480) ;moveTo(0,0); 
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第 一 个 命令 resizeTo() 修 改 浏览 器 窗口 的 尺寸 。 下 一 个 命令 moveTo() 告 诉 浏览 器 左上 角 位 于 何 处 
( 见 图 17-29 )。 



























@ JavaScript World :: JavaScript & Ajax Scripts and Information - Windows Internet Explorer fo ees) 
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Hello, and thanks for visiting JavaScript World, where you'll find 
many resources that will help you learn and master JavaScript - 
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Done @ Internet | Protected Mode: On 100% ~ 
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图 17-29 一眼 就 可 以 看 出 这 个 站 点 的 小 屏幕 版 本 显示 不 了 大 量 内 








提示 

O 这 个 bookmarklet 本 身 用 处 不 大 。 但 是 ， 可 以 创建 一 系列 与 它 几乎 完全 相同 的 bookmarklet, 分 
别针 对 你 希望 检查 的 所 有 窗口 大 小 。 显 然 ， 针 对 任何 窗口 大 小 修改 这 个 bookmarklet 都 是 非常 
简单 的 。 

口 以 相同 大 小 并 列 显示 多 个 窗口 也 是 有 用 的 〈 如 果 显 示 屏 幕 足够 大 )。 例 如 ， 可 以 通过 一 个 
bookmarklet 把 窗口 宽度 设置 为 700 像素 ， 高 度 设 置 为 显示 屏幕 的 最 大 高 度 : 
resizeTo(700,screen.availHeight); moveTo(0,0); 

再 创建 另 一 个 bookmarklet : 
resizeTo(700,screen.availHeight); moveTo(screen.availWidth-700,0) ; 

后 者 也 把 屏幕 宽度 设置 为 700 像素 , 高 度 设置 为 显示 屏幕 的 最 大 高 度 , 但 是 把 窗口 定位 在 
屏幕 的 右边 而 不 是 左边 。 如 果 显 示 屏 幕 是 1400 像素 宽 或 更 宽 ， 就 会 看 到 它们 并 排 显 示 ， 没 有 
He. 
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从 作为 Netscape Navigator 2.0 的 一 部 分 出 现 以 来 , JavaScript 经 过 了 20 来 年 的 演化 。 这 个 附 
录 简 要 地 讨论 了 JavaScript 的 不 同 版 本 ,以 及 各 种 浏览 器 所 包含 的 JavaScript 版 本 。 
这 里 还 提供 了 一 个 JavaScript 对 象 关系 图 以 及 一 个 对 象 表 ,其 中 列 出 了 大 多 数 JavaScript 软件 对 象 ， 
以 及 它们 的 属性 、 方 法 和 事件 处 理 程序 ， 并 且 包 括 ECMAScript 3。 


A.1 JavaScript 版 本 


JavaScript 有 几 个 不 同 的 名 称 ( 具体 视 你 所 用 的 产品 而 定 )， 而 且 有 十 几 个 不 同 的 版 本 。 除 了 
JavaScript 之 外 ， 还 有 JScript 和 ECMAScript。 下 面 分 别 介 绍 各 个 版 本 。 


A.1.1 Netscape 的 JavaScript 


JavaScript 的 第 一 个 版 本 最 初 称 为 LiveScript， 它 是 在 Netscape Navigator 2.0 中 首次 发 布 的 。 
Netscape 希望 LiveScript 成 为 一 种 扩展 浏览 器 功能 的 方式 , 并且 让 Web 设计 人 员 能 够 给 他 们 的 站 点 增 
加 交互 性 。Navigator 2.0 中 的 JavaScript 版 本 是 JavaScript 1.0。 

Navigator 3.0 中 提供 了 JavaScript 1.1， 其 中 增加 了 对 图 像 、 数 组 、Java applet 和 插件 的 支持 ， 还 
做 了 许多 其 他 修改 。 

随 着 Navigator 4.0 ( 也 称 为 Netscape Communicator ) 的 发 布 ，JavaScript 1.2 出 现 了 ， 它 做 了 更 多 
的 改进 和 调整 。Netscape 4.5 随后 提供 了 JavaScript 1.3。JavaScript 1.4 是 纯 服 务 器 端 语言 ， 而 Netscape 
6 引入 了 JavaScript 1.5。 

JavaScript 的 当前 版 本 是 由 开源 的 Mozilla 项 目 开发 的 , 主要 考虑 的 是 它 的 Firefox X Vidi» Firefox 
(以 及 它 的 分 支 版 本 ， 比 如 用 于 Mac OS X 的 Camino) 支持 ECMAScript-262 Edition 3， 也 支持 
ECMA-Script-262 Edition 5 ( 见 下 面 的 讨论 )。 

到 编写 本 书 时 ，JavaScript 的 当前 版 本 是 1.8.5, B& Firefox 4 一 起 发 布 ( 见 表 A-1 )。 

表 A-1 Netscape/Mozilla JavaScript 版 本 





























































































































浏 览 器 JavaScript 版 本 B| 览 器 JavaScript 版 本 
2.0 1.0 6.0, 7.0, Mozilla, Firefox 1.0~1.41 1.5 
3.0 1.1 Firefox 1.5 1.6 
4.0~4.05 1.2 Firefox 2.0 1.7 


4.06~4.7 1.3 Firefox 3.0 1.8 
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A.1.2 微软 的 JScript 


微软 按照 自己 的 方式 实现 JavaScript， 这 个 版 本 并 不 总 是 与 Netscape 版 本 兼容 。JavaScript 的 微软 
版 本 称 为 JScript 1， 它 或 多 或 少 与 JavaScript 1.0 兼容 ， 但 是 有 一 些 差异 。 很 自然 ，JScript 只 出 现在 
Windows 和 微软 的 IE (MSIE ) 版 本 中 。 

在 Windows E, 还 有 用 于 Windows 95/NT 的 JScript 2 ( 多 少 可 与 JavaScript 1.1 比较 ), MSIE 3.02 
的 升级 版 本 和 以 后 的 版 本 支持 JScript 2。 并 非 MSIE 3.02 的 所 有 版 本 都 支持 JScript 2.0。 要 想 查 明 已 经 
安装 的 JScript 是 哪个 版 本 ， 可 以 在 硬盘 上 搜索 jscript.dll。 查 看 这 个 文件 的 属性 ， 并 且 单 击 Version 选 
项 卡 。 如 果 文 件 版 本 不 是 至 少 以 2 开头 的 ， 那 么 浏览 器 早 就 应 该 升级 了 。 
在 Macintosh E, MSIE 3.0 没有 JScript, 但 是 3.01 中 有 。 它 包含 JScript 1.0， 但 是 与 Windows 上 
的 版 本 不 同 。 在 JScript 的 Mac 和 Windows 版 本 之 间 有 一 些 差异 ( 例如，Mac 版 本 文 持 Image IRE 
的 鼠标 翻转 器 ， 而 Windows JScript 1.0 不 支持 )。 在 2003 年 ， 微 软 放 弃 了 Mac ff] MSIE, Jf HF 2005 
年 停止 了 支持 。 

觉得 乱 吗 ?” 别 忙 ,还 有 呢 :JScript 3.0 大 致 相当 于 JavaScript 1.2 ,JScript 5.x 大 至 相当 于 JavaScript 1.5。 
Windows 的 一 些 版 本 也 与 特定 的 JScript 版 本 相关 联 ， 就 像 JScript 是 可 以 对 Windows 本 身 进行 脚本 编程 
的 几 种 脚本 语言 之 一 。 根 据 TE 的 版 本 和 所 运行 的 Windows， 表 A-2 有 助 于 你 了 解 Jscript 的 版 本 。 

表 A-2 JScript 版 本 







































































JScript 版 本 IE 版 本 Windows 版 本 JScript 版 本 IE 版 本 Windows 版 本 

3.0 4.0 5.6 XP 
5.0 5.0 5.7 7.0 
5.1 2000 5.7 XP SP3 
5.5 53 5.8 8.0 
2.9 ME 9.0 9.0 
5.6 6.0 

A.1.3 AOL 








AOL 浏览 器 支持 哪些 JavaScript 版 本 ?既然 AOL 拥有 Netscape， 你 可 能 猜测 它 会 附带 Netscape 
浏览 器 ,但 是 你 错 了 ， 除 非 你 是 指 Mac OS X 的 AOL。 由 于 有 合同 的 约束 ，AOL 使 用 微软 的 正 。 表 
A-3 列 出 AOL 的 各 个 版 本 附带 的 浏览 器 版 本 。 

表 A-3 AOL/MS IE 浏览 器 表 











AOL 版 本 16 fit PC 32 fi PC MAC 
3.0 3.0 3.0 2.1 
3.01 
3.02 
4.01 
4.0 3.0 无 效 3.01 
5.0 无 效 4.01 


根据 AOL 所 说 ，Mac ( 对 于 Mac OS 9 和 更 早 版 本 ) 和 16 位 PC 版 本 是 客户 机 中 骨 入 的 MSIE 附 
带 的 ,但 是 自从 AOL 3 LIK, 32 位 PC 版 本 可 以 使 用 用 户 系统 上 的 任何 MSIE 版 本 。 因 此 ,用 户 可 以 
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安装 从 MSIE 3 到 MSIE 6 或 更 高 版 本 。Mac OS X 的 AOL 使 用 Netscape 技术 提供 一 个 铝 入 式 浏览 絮 ， 
TW JavaScript 功能 相当 于 Netscape 7。 


A.2 ECMAScript 


在 1996 ^E, Web 开发 人 员 发 现 ，Netscape 沿 着 一 个 方向 发 展 JavaScript， 而 微软 沿 着 一 个 在 一 定 程 
度 上 兼容 但 有 差异 的 方向 发 展 JScript。 没 有 人 喜欢 这 种 分 裂 局 面 ，Web 开发 人 员 不 得 不 在 页 面 中 处 理 
JavaScript 的 不 同 “ 方 言 ”， 否 则 他 们 的 代码 就 只 能 在 一 种 浏览 器 中 工作 。 开 发 人 员 和 希望 有 个 标准 。 所 以 
Netscape 加 入 了 一 个 国际 标准 组 织 ECMA ， 并 且 癌 它 提交 了 JavaScript 语言 规范 ， 微 软 也 拿 出 了 自己 的 
意见 和 建议 。ECMA 开始 制定 JavaScript 标准 ， 并 且 于 1997 年 6 月 形成 了 ECMA-262 标准 (也 称 为 
ECMAScript， 这 个 术语 一 般 只 在 闲谈 中 使 用 )。 这 个 标准 与 JavaScript 1.1 非常 相似 , 但 不 完全 一 样 ， 后 
续 版 本 纠正 了 这 个 问题 。 如 果 你 想 阅 读 正式 的 ECMAScript 规范 ， 可 以 从 www.ecma-international.org/ 下 
载 。 找 到 Standards 链接 ， 然 后 通过 它 找到 ECMA-262 规范 。 

自从 1997 年 以 来 ， ECMAScript 经 历 了 几 种 版 本 : 最 重要 的 是 , 第 3 版 在 1999 年 12 月 发 布 , 第 
5 版 在 2009 年 12 月 发 布 (第 4 版 一 直 没 有 发 布 ， 最 终 取消 了 )。 现 在 的 浏览 器 支持 第 13 版 ( 约 与 
JavaScript 1.5 相当 )， 并 且慢 慢 兼容 第 5 版 。 一 定 要 注意 的 是 ，ECMAScript 现在 控制 着 JavaScript 标 
准 的 发 展 方向 。 当 前 所 有 浏览 器 厂商 都 让 自己 的 JavaScript KW- ECMAScript 兼容 。 

所 以 , 只 要 你 编写 的 代码 符合 ECMAScript 标准 , 它 就 应 该 能 够 在 MSIE 4 和 Netscape Navigator 6 
中 正常 运行 。 但 是 ,仍然 应 该 在 不 同 的 浏览 器 、 平 台 和 版 本 中 测试 你 的 代码 。 
基于 WebKit 的 浏览 器 ( 如 Apple 的 Safari 和 Google 的 Chrome ) 一 直 支 持 ECMAScript. 


AJ ”对象 关系 图 


在 本 书 中 , 我 们 主要 使 用 DOM 脚本 编程 方式 ， 
这 种 方式 需要 寻找 特定 的 id 而 不 是 特定 对 象 ,与 在 
对 象 树 中 降序 ( 比如 通过 document.form.button. 
radio) 相 比 , 使 用 getElementByID() 并 且 直 接 访问 
元 素 要 容易 得 多 。 我 们 也 建议 你 在 自己 的 代码 中 使 
用 DOM 脚本 编程 方式 。 

如 果 你 需要 关于 可 用 对 象 的 信息 ， 那 么 请 查阅 
Firefox DOM Inspector， 如 图 A-1 所 示 。 尽 管 它 提 
供 的 信息 并 非 都 是 跨 浏览 器 有 效 的 ， 但 可 以 作为 学 
习 的 起 点 。 


























































































































































































































图 A-1 使 用 Firefox DOM Inspector， 你 可 以 清楚 























pe un NN 地 了 解 浏览 器 如 何 查看 代码 。 其 他 浏览 
要 了 解 存在 哪些 属性 以 及 它们 相互 协作 的 方式 。 本 节 ior 28424 


就 介绍 这 些 内 容 ， 作 为 老式 操作 方式 的 参考 资料 。 

JavaScript 对 象 以 特定 的 次 序 连接 在 一 起 ， 所 以 可 以 用 对 象 关系 图 的 形式 了 解 它 们 。 如 图 A-2 所 
示 ，JavaScript 中 的 主要 对 象 是 当前 窗口 ， 所 有 其 他 软件 对 象 都 连接 到 这 个 窗口 。 这 种 对 象 次 序 常 常 
PRA JavaScript 对 象 层次 结构 ， 但 是 这 个 名 称 对 于 本 书 来 说 太 夸 张 了 。 
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图 例 : 

name 所 有 支持 JavaScript 的 浏览 器 
name Netscape 3+ 和 MSIE 4+ 
name Netscape 4+ 和 MSIE 4+ 
name 只 用 于 MSIE 4+ 


name 只 用 于 Netscape 4+ 























name Netscape 6+ 和 MSIE4+ 
name Netscape 6+ 和 MSIE5S+ 


© 


— window (frame, self, top, parent) 




































































clientInformation activeElement ackground 
closed alinkColor backgroundAttachment 
defaultStatus all | element 9 style? backgroundColor 
dialogArguments al] | ——— ——3 length backgroundImage 
dialogHeight anchor name backgroundPosition 
dialogLeft text backgroundPositionX 
dialogTop x backgroundPositionY 
dialogWidth y ackgroundRepeat 
document 一 一 一 一 一 一 一 一 | border 
event anchors[ ]——— length borderBottom 
external applet align borderBottomColor 
frames[ —————34 length applets[] ————- length code borderBottomStyle 
history current area alt codeBase borderBottom Width 
length areas[] ———— length coords height borderColor 
next attributes] ——— length hash hspace borderLeft 
previous bgColor host name borderLeftColor 
history]  ——————3 length body —— —— — ——— —  — alink hostname |vspace horderLeftStyle 
innerHei ght charset background href width borderLeftWidth 
innerWidth childNodes[] — length bgColor noHref borderRight 
length children[] bgProperties pathname borderRightColor 
location ————— hash cookie bottomMargin | port borderRightStyle 
host defaultCharset leftMargin protocol orderRight Width 
hostname documentElement link search borderStyle 
href domain noWrap shape borderTop 
pathname embed rightMargin target borderTopColor 
port embeds[] ——— length scroll borderTopStyle 
protocol expando scrollLeft borderTop Width 
search fgColor scrollTop order Width 
locationbar visibility — | firstChild text bottom 
menubar 19 visibility topMargin clear 
name vlink clip 
Y Y Y 
图 A-2 
(D lement 对 象 只 是 MS IE ff —^ iE bos Ro TESS TORIS, DOE RAT R KRAK. 





@ 正如 第 2 章 所 述 ，style 和 它 的 属性 在 Netscape 6+ 中 但 是 只 能 通过 document.getElementById 访问 。 
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navigator 


opener 
outerHeight 
outerWidth 
pagexOffset 
pageYOffset 
parent 
personalbar 
screen 
screenL eft © 
screenTop® 
screenx 
screeny 
scrollbars 
self 

status 
statusbar 
toolbar 
top 








(cont.) 


document 
(cont.) 








offscreenBuffering 


— visibility 


visibility 


visibility 
visibility 





— window (frame, self, top, parent) 





(D MA MS IE 5+ 开 始 存在 。 





A 





form 



































action checked ^ 
button form defaultChecked 
name form qu 一 | 
type name 
value type 
checkbox ———————— value 
elements] 一 | length form 
encoding name 
enctype type 
fileUpload value 
hidden form 
length maxLength 
method name 
name readOnly 
size 
type 
value 
password defaultvalue 
radio checked form 
defaultChecked maxLength 
form name 
name readOnly 
type size 
value type 
radio[] length value 
reset form 
name 
type 
value 
select form 
length 
multiple 
name 
option defaultSelected 
form 
index 
selected 
text 
value 
options] — length 
selectedindex 
size 
type 
value 
Y Y 
图 A-2 (5X 


Color 

CSSText 
cursor 
direction 
display 

font 
fontFamily 
ontSize 
ontStyle 
ontVariant 
ontWeight 
height 

eft 

ineHeight 
istStyle 
istStylelmage 
istStylePosition 
istStyleType 





margin 
marginBottom 
marginLeft 
marginRight 
marginTop 
overflow 
padding 
paddingBottom 
paddingLeft 
paddingRight 
paddingTop 
pageBreakAfter 
pageBreakBefore 
pixelHeight 
pixelLeft 
pixelTop 
pixelWidth 
posHeight 





position 

posLeft 

posTop 

posWidth 

right 

styleFloat 
tableLayout 
textAlign 
textDecoration 
textDecorationBlink 
textDecorationLine Through 
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document 
(5) 








(D layer (和 layers[] ) 对 象 及 其 属性 只 存在 了 





forms[] 
height 
image ——] 





images[] —] 
lastChild 
lastModified 


layer? —7] 





layers(]9 











submit ——] 


target 
text 

textarea —] 
length 


align 

alt 
border 
complete 
height 
href 
hspace 
isMap 





lowsrc 
name 
SIC 
useMap 
vspace 
width 


length 


above 
background 
below 
bgColor 
clip 
document 
hidden 

left 

name 

pagex 

pageY 
parentLayer 
siblingAbove 
siblingBel ow 
src 

top 
visibility 
zIndex 


4 length 





form 
name 
type 
value 


cols 
defaultValue 
form 

name 
readOnly 
TOWS 

type 

value 


wrap 






































^ textDecorationNone 
textDecorationOverline 
style — textDecorationUnderline 
(5) 
textIndent 
defaultvalue textTransform 
disabled top 
form unicodeBidi 
maxLength verticalAlign 
name visibility 
readOnly whiteSpace 
size width 
type wordSpacing 
value zIndex 
bottom 
height 
left 
right 
top 
width | 图 例 : 
name 所 有 支持 JavaScript 的 浏览 器 
name Netscape 3+ 和 MSIE 4+ 
name Netscape 4+ 和 MSIE 4+ 
name 只 用 于 MSIE 4+ 
name 只 用 于 Netscape 4+ 
name Netscape 6+ 和 MSIE4+ 
name Netscape 6+ 和 MSIE5+ 

















F Netscape 4.x 中 ， 在 后 续 版 本 中 没有 。 
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A 






















































































linkColor hash 
link host 图 例 : 

a links] ————-J length hostname name ”所 有 支持 JavaScript 的 浏览 器 
location — | hash href name Netscape 3+ 和 MSIE 4+ 
namespace URT host name name Netscape 4+ 和 MSIE 4+ 
nextSibling hostname pathname name 只 用 于 MSIE 4+ 
nodeName href port name 只 用 于 Netscape 4+ 
nodeType pathname | protocol name Netscape 6+ 和 MSIF4+ 
parentNode port rel name Netscape 6+ 和 MSIES+ 
parentWindow protocol fev 1 

search search 
plugins[] ————— length target 
previousSibling text appCodeName 
readyState X appMinorVersion 
referrer y appName 
appVersion 
script. ——________| defer browserLanguage 
scripts[] ————— length event cookieEnabled 
styleSheet cssRules htmlFor cpuClass 
disabied janguage language 
href sre mimeType ? description 
id text enabledPlugin 
imports[] type suffixes 
media type 
owningElement mimeTypes[] length 
parentStyleSheet onLine 
readOnly platform 
rules[] plugin ? ——— — ——— description 
title filename 
type length 
styleSheets[]  ———4 length name 
title plugins[] ————— length 
URL systemLanguage 
vlinkColor userAgent 
width userLanguage 
userProfile 
availHeight 
availLef 
availTop 
availWidth 
bufferDepth 
colorDepth 
navigator fontSmoothingEnabled 
heigh 
pixelDepth 
updatelnterval 
width 
图 A-2 (8) 








I 








D 这 个 对 象 ( 及 其 属性 ) 存在 于 Netscape 3+ 和 MSIE 4+ (Mac) 中 。 
Q 这 个 对 象 ( 及 其 属性 ) 存在 于 Netscape 3+ 和 MSIE 5+ ( Mac ) 中 。 
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AA HAR 





JavaScript 书 都 应 该 提供 JavaScript HRR, 包括 它们 的 属性 、 方 法 和 








dint 





E 程 序 ( 这 些 术 语 的 





定义 见 第 1 章 )。 表 A-4 列 出 了 大 多 数 JavaScript 对 象 并 且 包 括 ECMAScript 3。 我 们 省 略 了 几 个 很 不 
常用 的 对 象 ， 以 及 较 早 版 本 中 的 一 些 老式 对 象 ， 这 些 对 象 已 经 被 新 对 象 或 扩展 对 象 取 代 了 。 


表 A-4 JavaScript RE 

















对 象 m 性 5 X 事件 处 理 程序 
anchor name 无 无 
text 
X 
y 
anchors 数 组 length 无 无 
Applet align applet 方 法 methods 
onblur 
code blur onclick 
codeBase focus ondblclick 
height onfocus 
hspace onhelp 
name onkeydown 
vspace onkeypress 
width onkeyup 
onload 
onmousedown 
onmousemove 
onmouseout 
onmouseover 
onmouseup 
onresize 
onscroll 
anchors 数 组 length 无 无 
Area alt 无 onblur 
cords onclick 
hash ondblclick 
host onfocus 
hostname onhelp 
href onkeydown 
noHref onkeypress 
pathname onkeyup 
port onload 
protocol onmousedown 
search onmousemove 
shape onmouseout 
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( 续 ) 
对 属 性 方  ; 事件 处 理 程序 
target onmouseover 
onmouseup 
onresize 
Array length concat 无 
join 
pop 
push 
reverse 
shift 
slice 
sort 
splice 
toLocaleString 
toString 
unshi ft 
Body alink createTextRange onblur 
background onclick 
bgColor ondblclick 
bgProperties onfocus 
bottomMargin onhelp 
leftMargin onkeydown 
link onkeypress 
noWrap onkeyup 
rightMargin onmousedown 
scroll onmousemove 
scrollLeft onmouseout 
scrollTop onmouseover 
text onmouseup 
topMargin onresize 
vlink onscroll 
Button form blur onblur 
name click onchange 
type focus onclick 
value handleEvent ondblclick 
onfocus 
onhelp 
onkeydown 
onkeypress 
onkeyup 
onmousedown 
onmousemove 


onmouseout 
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(EE) 
对 m 性 5 X 事件 处 理 程序 
onmouseover 
onmouseup 
onselect 
Checkbox checked blur onblur 
defaultChecked click onchange 
form focus onclick 
name handleEvent ondblclick 
type onfocus 
value onhelp 
onkeydown 
onkeypress 
onkeyup 
onmousedown 
onmousemove 
onmouseout 
onmouseover 
onmouseup 
onselect 
Date X getDate 无 
getDay 
getFullYear 
getHours 
getMilliseconds 
getMinutes 
getMonth 
getSeconds 
getTime 
getTimezoneOffset 
getUTCDate 
getUTCDay 
getUTCFullYear 
getUTCHours 
getUTCMilliseconds 
getUTCMinutes 
getUTCMonth 
getUTCSeconds 
getYear 
parse 
setDate 
setFullYear 
setHours 


setMilliseconds 














358 WRA JavaScript 的 版 本 演化 和 参考 资料 
( 续 
对 属 性 5 3 事件 处 理 程 序 

setMinutes 

setMonth 

setSeconds 

setTime 

setUTCDate 

setUTCFullYear 

setUTCHours 

setUTCMilliseconds 

setUTCMinutes 

setUTCMonth 

setUTCSeconds 

setYear 

toGMTString 

toLocaleDateString 

toLocaleString 

toLocaleTimeString 

toString 

toUTCString 

UTC 

valueOf 

document activeElement clear onblur 

alinkColor close onclick 
all createElement oncut 
Anchor createStylesheet ondblclick 
anchors createTextNode onfocus 
Applet elementFromPoint onhelp 
applets focus onkeydown 
Area getElementByld onkeypress 
areas getElementsByName onkeyup 
attributes getElementsByTagName onmousedown 
bgColor getSelection onmousemove 
Body handleEvent onmouseout 
charset open onmouseover 
childNodes write onmouseup 
children writeln onpaste 
cookie onresize 
defaultCharset 


documentElement 
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对 


属 


( 


5 X 事件 处 理 程 


续 
序 


) 





fgColor 
firstChild 


Form 
forms 
height 
Image 
images 
lastChild 


lastModified 


Layer 
layers 
linkColor 
Link 
links 
location 


namespaceURI 


nextSibling 


nodeName 


nodeType 


parentNode 
parentWindow 


plugins 


previousSibling 
readyState 


referrer 
Script 
scripts 
StyleSheet 


styleSheets 


title 

URL 
vlinkColor 
width 





FileUpload 


form 
name 
type 
value 


blur onblur 
focus onchange 
handleEvent onclick 
select ondblclick 
onfocus 
onhelp 


onkeydown 


onkeypress 
onkeyup 
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( 续 ) 
对 OR 属 性 5 X 事件 处 理 程 序 
onmousedown 
onmousemove 
onmouseout 
onmouseover 
onmouseup 
onselect 
Form action handleEvent onclick 
Button reset ondblclick 
Checkbox submit onhelp 
elements onkeydown 
encoding onkeypress 
encType onkeyup 
FileUpload onmousedown 
Hidden onmousemove 
length onmouseout 
method onmouseover 
name onmouseup 
Password onreset 
Radio onsubmit 
Reset 
Select 
Submit 
target 
Text 
Textarea 
forms 数 组 length 无 无 
frames 数 组 length E 无 
Hidden form 无 I 
maxLength 
name 
readOnly 
size 
type 
value 
History current back 无 
length forward 
next go 
previous 
history ZH length 无 无 





Image align 无 onabort 
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(E) 
对 m 性 5 法 事件 处 理 程序 
alt onblur 
border onchange 
complete onclick 
height ondblclick 
href onerror 
hspace onfocus 
isMap onhelp 
lowsrc onkeydown 
name onkeypress 
src onkeyup 
useMap onload 
vspace onmousedown 
width onmousemove 
X onmouseout 
y onmouseover 
onmouseup 
onreset 
onresize 
onscroll 
onsubmit 
images 数 组 length 无 无 
Layer above 0ad onblur 
background oveAbove onfocus 
below oveBelow onload 
bgColor oveBy onmouseout 
clip oveTo onmouseover 
document oveToAbsolute onmouseup 
hidden esizeBy 
left esizeTo 
name 
pageX 
pageY 
parentLayer 
siblingAbove 
siblingBelow 
src 
top 
visibility 
zIndex 
1ayers 数 组 length X 无 
Link hash 无 onblur 
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(E) 
对 OR 属 5 法 事件 处 理 程 序 
host onclick 
hostname ondblclick 
href onfocus 
name onhelp 
pathname onkeydown 
port onkeypress 
protocol onkeyup 
rel onmousedown 
rev onmousemove 
search onmouseout 
target onmouseover 
text onmouseup 
x 
M 
Links 数 组 length 无 无 
location hash assign 无 
host reload 
hostname replace 
href 
pathname 
port 
protocol 
search 
Math E abs 无 
LN2 acos 
LN10 asin 
LOG2E atan 
LOGIOE atan2 
PI ceil 
SQRTI 2 cos 
SQRT2 exp 
floor 
log 
max 
min 
pow 
random 
round 
sin 
sqrt 


tan 
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(E) 
对 象 m 性 方 法 事件 处 理 程序 
MimeType description 无 无 
enabledPlugin 
suffixes 
type 
mimeTypes 数 组 length 无 无 
navigator appCodeName javaEnabled 无 
appMinorVersion preference 
appName taintEnabled 
appVersion 
browserLanguage 
cookieEnabled 
cpuClass 
language 
MimeType 
mimeTypes 
onLine 
platform 
Plugin 
plugins 
systemLanguage 
userAgent 
userLanguage 
userProfile 
Number MAX_VALUE toExponential 无 
MIN_VALUE toFixed 
NaN toLocaleString 
NEGATIVE INFINITY toPrecision 
POSITIVE INFINITY toString 
valueOf 
Object attributes appendChild onblur 
childNodes blur onchange 
children click onclick 
className cloneNode oncontextmenu 
clientHeight focus ondblclick 
clientLeft getAttribute onfocus 
clientTop getAttributeNode onkeydown 
clientWidth getElementsByTagName onkeypress 
dir getExpression onkeyup 
firstChild hasChildNodes onmousedown 
id insertBefore onmousemove 
innerHTML item onmouseout 
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对 


属 


方法 


(HE) 
事件 处 理 程 序 





lang 
language 
lastChild 
length 
localName 


namespaceURI 


nextSibling 
nodeName 
nodeType 
nodeValue 
offsetHeight 
offsetLeft 
offsetParent 
offsetTop 
offsetWidth 


ownerDocument 


parentNode 
prefix 
previousSibling 
readyState 
scrollHeight 
scrollLeft 
scrollTop 
scroll Width 
sourceIndex 
style 
tabIndex 
tagName 
title 


releaseCapture 
removeAttribute 
removeAttributeNode 
removeChild 
replaceChild 


scrollIntoView 


setAttribute 


onmouseover 
onmouseup 
onreadystatechange 
onresize 


onscroll 





Option 


defaultSelected 


form 
index 
selected 
text 


value 


remove 





Options 数 组 


length 


无 


无 





Password 


defaultValue 
form 
maxLength 
name 
readOnly 


blur 

focus 
handleEvent 
select 


onblur 
onchange 
onclick 
ondblclick 
onfocus 
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(5E) 
xt 属 5 事件 处 理 程序 
size onhelp 
type onkeydown 
value onkeypress 
onkeyup 
onmousedown 
onmousemove 
onmouseout 
onmouseover 
onmouseup 
onselect 
Plugin description refresh 无 
filename 
length 
name 
plugins 数 组 length 无 无 
Radio checked blur onblur 
defaultChecked click onchange 
form focus onclick 
name handleEvent ondblclick 
type onfocus 
value onhelp 
onkeydown 
onkeypress 
onkeyup 
onmousedown 
onmousemove 
onmouseout 
onmouseover 
onmouseup 
onselect 
radio 数 组 length 无 无 
RegExp input 无 无 
lastMatch 
lastParen 
leftContext 
multiline 
rightContext 
$1 
$2 
$3 


$4 
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CE 
xt m 性 5 X 事件 处 理 程 序 
$s 
$6 
$7 
$s 
$5 
正则 表达 式 global compile X 
ignoreCase exec 
lastIndex test 
source 
Reset form blur onblur 
name click onclick 
type focus ondblclick 
value handleEvent onfocus 
onhelp 
onkeydown 
onkeypress 
onkeyup 
onmousedown 
onmousemove 
onmouseout 
onmouseover 
onmouseup 
onselect 
screen availHeight 无 无 
availLeft 
availTop 
availWidth 
bufferDepth 
colorDepth 
fontSmoothingEnabled 
height 
pixelDepth 
updatelnterval 
width 
Script defer 无 onerror 
event onload 
htmlFor 
language 
src 
text 


type 
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( 续 ) 
对 R 属 性 5 X 事件 处 理 程序 
Select form blur onblur 
length focus onchange 
multiple handleEvent onclick 
name ondblclick 
Option onfocus 
options onhelp 
selectedIndex onkeydown 
size onkeypress 
type onkeyup 
value onmousedown 
onmousemove 
onmouseout 
onmouseover 
onmouseup 
onresize 
String length anchor 无 
big 
blink 
bold 
charAt 
charCodeAt 
concat 
fixed 
fontcolor 
fontsize 
fromCharCode 
indexOf 
italics 
lastIndexOf 
link 
localeCompare 
match 
replace 
search 
slice 
small 
split 
strike 
sub 
substr 
substring 


sup 
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对 


属 性 方 ” 法 


事件 处 理 程 


F| y 





toLocaleLowerCase 
toLocaleUpperCase 
toLowerCase 
toString 
toUpperCase 
valueOf 





Style 


background 无 


backgroundAttachment 


backgroundColor 


backgroundImage 
backgroundPosition 
backgroundPositionX 
backgroundPositionY 





backgroundRepeat 
border 
borderBottom 
borderBottomColor 
borderBottomStyle 
borderBottomWidth 
borderColor 
borderLeft 
borderLeftColor 
borderLeftStyle 
borderLeftWidth 
borderRight 
borderRightColor 
borderRightStyle 
borderRightWidth 
borderStyle 
borderTop 
borderTopColor 
borderTopStyle 
borderTop Width 
borderWidth 
bottom 

clear 

clip 

color 

cssText 

cursor 

direction 


display 
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对 


属 性 


( 
方 ” 法 事件 处 理 程 


续 
序 


) 





font 

fontFamily 
fontSize 
fontStyle 
fontVariant 
fontWeight 
height 

left 

lineHeight 
listStyle 
listStyleImage 
listStylePosition 
listStyleType 
margin 
marginBottom 
marginLeft 
marginRight 
marginTop 
overflow 
padding 
paddingBottom 
paddingLeft 
paddingRight 
paddingTop 
pageBreakA fter 
pageBreakBefore 
pixelHeight 
pixelLeft 
pixelTop 
pixelWidth 
posHeight 
position 
posLeft 
posTop 
posWidth 

right 
styleFloat 
tableLayout 
textAlign 
textDecoration 
textDecorationBlink 


textDecorationLineThrough 
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(E) 
xt Bm 性 5 法 事件 处 理 程 序 
textDecorationNone 
textDecorationOverline 
textDecorationUnderline 
textIndent 
textTransform 
top 
unicodeBidi 
verticalAlign 
visibility 
whiteSpace 
width 
wordSpacing 
zIndex 
StyleSheet cssRules addlmport 无 
disabled addRule 
href removeRule 
id 
imports 
media 
owningElement 
parentStyleSheet 
readOnly 
rules 
title 
type 
Submit form blur onblur 
name click onclick 
type focus ondblclick 
value handleEvent onfocus 
onhelp 
onkeydown 
onkeypress 
onkeyup 
onmousedown 
onmousemove 
onmouseout 
onmouseover 
onmouseup 
onselect 
Text defaultValue blur onblur 
disabled click onchange 
form focus onclick 
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( 续 ) 
对 R 属 性 5 法 事件 处 理 程序 
maxLength handleEvent ondblclick 
name select onfocus 
readOnly onkeydown 
size onkeypress 
type onkeyup 
value onmousedown 
onmousemove 
onmouseout 
onmouseover 
onmouseup 
onselect 
Textarea cols blur onblur 
defaultValue click onchange 
form createTextRange onclick 
name focus ondblclick 
readOnly handleEvent onfocus 
IOWS select onhelp 
type onkeydown 
value onkeypress 
wrap onkeyup 
onmousedown 
onmousemove 
onmouseout 
onmouseover 
onmouseup 
onscroll 
onselect 
window clientInformation alert onblur 
closed back onerror 
defaultStatus blur onfocus 
dialogArguments clearInterval onhelp 
dialogHeight clearTimeout onload 
dialogLeft close onmove 
dialogTop confirm onresize 
dialogWidth focus onscroll 
document forward onunload 
event handleEvent 
external home 
frames moveBy 
history moveTo 
innerHeight navigate 


innerWidth open 
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对 


属 性 5A ”法 


事件 处 理 程 


anes 





length print 


location prompt 
locationbar resizeBy 
menubar resizeTo 


name scroll 


navigator scrollBy 


offscreenBuffering scrollTo 


opener setInterval 


outerHeight setTimeout 


outerWidth stop 
pageXOffset 


pageYOffset 
parent 


pe 


sonalbar 


screen 


SC 
SC 
SC 
SC 
SC 





self 
status 


sta 


eenLeft 
eenTop 
eenx 
eenY 
ollba 


Cn 





tusba 


toolbar 


top 


JavaScript 保留 字 








DR. 留 字 是 对 JavaScript 有 特殊 含义 的 单词 。 因 此 ， 不 能 将 它们 用 作 变 量 名 或 函数 名 。 
在 


前 面 的 章 
是 预 留 的 保留 字 ， 也 就 是 说 ， 它们 可 能 








经 见 过 了 许多 保留 字 ， 但 是 对 其 他 保留 字 可 能 还 不 熟悉 。 其 中 一 部 





节 中 ， 你 已 








E ECMAScript 未 来 版 本 中 的 命令 。 现 在 就 应 该 避免 使 用 它 


以 免 在 新 版 本 发 布 时 不 得 不 修改 代码 。 





ECMAScript 3 保留 字 

从 ECMAScript 3 开始 ， 这 些 单词 是 JavaScript 语言 的 一 部 分 。 
break for throw 

case function try 

catch if typeof 
continue in var 

default instanceof void 

delete new while 

do return with 

else switch 

finally this 

ES3 为 以 后 保留 的 单词 

abstract final protected 
boolean float public 

byte goto short 

char implements static 
class import super 

const int synchronized 
debugger interface throws 
double Long transient 


3 
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enum native volatile 
export package 
extends private 


ECM 5 未 来 的 保留 字 
ECMAScript4 引入 了 一 种 新 型 的 保留 字 : 与 上 下 文 相关 的 保留 字 。 也 就 是 说 ,这 些 单词 只 在 特定 





时 间 和 特定 位 置 是 保留 字 。 但 是 为 了 谨慎 起 见 ， 建 议 避 免 我 用 以 下 单词 作为 变量 名 。 





这 里 ES5 的 保留 字 列 表 。 它 与 ES3 类 似 ， 考 虑 到 浏览 右 主 要 支持 CS3 ， 我 们 建议 你 记 住 所 有 列表 。 
break finally this 


case for throw 
catch function try 
continue if typeof 
debugger in var 
default instanceof void 
delete new while 
do return with 
else switch 


ES5 Future Reserved Words 


class import public 
const interface static 
enum let super 
export package yield 
extends private 


implements protected 
应 该 避免 使 用 的 其 他 标识 符 
附录 A 中 列 出 的 对 象 名 不 是 正式 的 保留 字 ( 不 属于 上 面 列 出 的 关键 字 ), 但 是 因为 它们 是 JavaScript 




















语言 的 一 部 分 ， 你 不 应 该 将 它们 用 作 变 量 名 或 函数 名 。 如 果 这 么 做 ,结果 无 法 预料 。 


男 外 ， 大 多 数 浏览 器 是 区 分 大 小 写 的 ， 这 意味 着 Document 和 document 是 不 同 的 。 卫 只 在 某 些 时 











候 是 区 分 大 小 写 的 , 这 意味 着 它 可 能 无 法 区 分 Document 和 documento KIE, 即使 代码 能 够 在 一 种 浏览 


Tir 























FP 正 常 工 作 ， 也 不 意味 着 在 其 他 浏览 器 中 也 能 正常 工作 。 一 定 要 进行 测试 。 
abstract get prototype 
arguments goto RangeError 
Array has ReferenceError 


Boolean include RegExp 
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byte 

call 

cast 

char 

Date 

decimal 

decodeURI 
decodeURIComponent 
double 

dynamic 

each 

encodeURI 
encodeURIComponent 
Error 

eval 

EvalError 

false 

final 

float 

Function 


generator 


Infinity 
int 
internal 
intrinsic 
is 
isFinite 
isNaN 
JSON 

like 

long 

Math 
namespace 
NaN 
native 
null 
Number 
Object 
override 
parseFloat 
parseInt 


precision 


rounding 
set 

short 
standard 
strict 
String 
synchronized 
SyntaxError 
throws 

to 
transient 
true 

type 
TypeError 
uint 
undefined 
URIError 
use 
volatile 


xml 


CSS 参考 








E 


1X. 个 附录 列 出 W3C 定义 的 CSS 2.1 属性 (www.w3.org/TR/ CSS2 )。 
CSS 2.0 这 个 规范 早 在 1998 年 5 月 就 标准 化 了 ， 但 是 直到 本 书 编写 时 ， 其 中 许多 属性 还 没 






































有 在 任何 浏览 需 中 实现 。 下 一 个 版 本 〈CSS 2.1) 目前 处 于 候选 推荐 标准 阶段 。CSS 2.1 规范 的 目标 是 
使 CSS2 更 接近 浏览 器 厂商 已 经 实际 实现 的 特性 。 这 个 列表 基本 上 是 完整 的 ， 只 是 不 包含 听觉 属性 ， 
这 些 属 性 用 来 为 有 视觉 残疾 的 用 户 进行 语音 合成 ， 到 目前 为 止 JavaScript 还 无 法 修改 它们 。 

















因为 本 书 是 关于 JavaScript 的 ， 我 们 只 是 稍微 接触 了 CSS 的 皮毛 。 如 果 你 想 了 解 更 多 信息 ,我们 








推荐 Tom Negrino 和 Dori Smith 著 的 Styling Web Pages with CSS: Visual QuickprojeH Guide. 
表 C-1 基本 概念 
属 性 名 值 
HTML 中 的 标签 link 


<style>...</style> 
< x style= "FAHA;"> 





分 组 x, y, z {声明 ;} 
b F3OGETEdR xy z {声明 ;} 
类 选择 器 .class 
ID fd itid 
6@ 规 则 @import 

@media 

@page 
重要 性 limportant 








表 C-2 伪 元 素 和 伪 类 





属 性 名 值 
后 一 个 元 素 :after 
锚 元 素 :active 


a 
a:focus 
a:hover 
a:link 
a:visited 
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(5) 
属 性 名 值 
前 一 个 元 素 :before 
第 一 个 元 素 a 
第 一 个 子 元素 :first-child 
左 元 素 :left 
段落 p:first-letter 
p:first-line 
右 元 素 :right 
表 C-3 颜色 和 背景 属性 
属 性 名 值 
background < 背景 颜色 > 
< 背景 图 像 > 
< 背景 重复 方式 > 
< 背景 附着 > 
< 背景 位 置 > 
background-attachment scroll 
fixed 
background-color < 颜色 > 
transparent 
background- image «url» 
none 
background-position < 百分数 > 
< 长 度 > 
top 
center 
bottom 
left 
right 
background-repeat repeat 
repeat-x 
repeat-y 
no-repeat 
Color < 颜色 > 
表 C-4 字体 属性 
属 性 名 值 
< 字体 样式 > 
< 字体 变 体 > 
< 字体 粗细 > 
< 字体 大 小 >/< 行 高 度 > 
< 字体 系列 > 
caption 
icon 
menu 


message-box 


smal 
stat 


l-caption 
us-bar 
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m 性 名 


值 





font-family 


font-size 


font-style 


font-variant 


font-weight 


属 性 名 


表 C-5 生成 的 内 容 属性 


< 字体 系列 名 > 

cursive 

fantasy 

monospace 

sans-serif 

serif 

< 绝对 大 小 > (xx- small-xx-large ) 
< 相对 大 小 > ( smaller-larger ) 
< 长 度 > 

< 百分数 > 

normal 

italic 

oblique 

normal 

small-caps 

normal 

bold 

bolder 

lighter 

100-900 





值 





content 


< 字符 串 > 

«url» 

< 标识 符 > 

a Pis» 
open-quote 
close-quote 
no-open-quote 
no-close-quote 

















none 
normal 
counter-increment < 标识 符 > 
< 整数 > 
none 
counter-reset < 标识 符 > 
< 整数 > 
none 
quotes < 字符 串 > 
none 
A C-6 文本 属性 
属 性 名 值 
letter-spacing normal 


< 长 度 > 
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属 性 名 


值 





text-align 


text-decoration 


text-indent 


text-transform 


white-space 


word-spacing 


属 性 名 


表 C-7 框 属性 


left 

right 
center 
justify 
none 
underline 
overline 
line-through 
blink 

< 长 度 > 

< 百分数 > 
capitalize 
uppercase 
lowercase 
none 





normal 
pre 
nowrap 
pre-wrap 
pre-line 
normal 


< 长 度 > 





border 


border-bottom 


border-bottom-color 
border-bottom-style 
border-bottom-width 


border-collapse 


border-color 


border-left 


ee 


HK 
v 


S k 


^ 
这 
> 
TEE OTA TESD DEI 
v 


v 


Ge oe 








transparent 
< 上 边框 宽度 > 
< 边框 样式 > 
< 边框 颜色 > 
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( 续 ) 
属 性 名 值 

border-left-color < 边框 颜色 > 
border-left-style < 边框 样式 > 
border-left-width < 边框 宽度 > 
border-right < 上 边框 宽度 > 

< 边框 样式 > 

< 边框 颜色 > 
border-right-color < 边框 颜色 > 
border-right-style < 边框 样式 > 
border-right-width < 边框 宽度 > 
border-spacing < 长 度 > 
border-style none 

hidden 

dotted 

dashed 

solid 

double 

groove 

ridge 

inset 

outset 
border-top < 上 边框 宽度 > 

< 边框 样式 > 

< 边框 颜色 > 
border-top-color < 边框 颜色 > 
border-top-style < 边框 样式 > 
border-top-width < 边框 宽度 > 
border-width thin 

medium 

thick 

《长度 > 
margin < 外 边 距 宽 度 > 
margin-bottom < 外 边 距 宽度 > 
margin-left < 外 边 距 宽 度 > 
margin-right < 外 边 距 宽 度 > 
margin-top < 外 边 距 宽 度 > 
padding < 内 边 距 宽 度 > 
padding-bottom < 内 边 距 宽 度 > 
padding-left “内 边 距 宽度 > 
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属 性 


名 


(5) 





padding-right 
padding-top 


m 性 


名 








表 C-8 视觉 格式 化 属性 





display 


left 


top 


bottom 


float 


clear 


direction 


block 

inline 
inline-block 
list-item 
run-in 

table 
inline-table 
table-row-group 
table-header-group 
table-footer-group 
table-row 
table-column-group 
table-column 
table-cell 
table-caption 





none 
auto 
<length> 
<percentage> 
right auto 
<length> 
<percentage> 
auto 
<length> 
<percentage> 
auto 
<length> 
<percentage> 
left 

right 

none 

none 

left 

right 

both 

ltr 

rtl 
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CHE) 
E 性 名 值 
unicode-bidi normal 
embed 


width 


min-width 


max-width 


height 


min-height 


max-height 


line-height 


vertical-align 


position 


z-index 


bidi-override 
<length> 
<percentage> 
auto 
<length> 
<percentage> 
<length> 
<percentage> 
none 
<length> 
<percentage> 
auto 
<length> 
<percentage> 
<length> 
<percentage> 
none 

normal 
<number> 
<length> 
<percentage> 
baseline 

sub 

super 

top 
text-top 
middle 
bottom 
text-bottom 
<percentage> 
<length> 
static 
absolute 
relative 
fixed 

auto 


<integer> 
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表 C-9 视觉 效果 属性 











属 性 名 值 
overflow visible 
hidden 
scroll 
auto 
clip auto 
<shape> 
visibility collapse 
visible 
hidden 
R C-10 列表 属性 
属 性 名 值 
list-style < 列表 样式 类 型 > 
< 列表 样式 位 置 > 


list-style-image 
list-style-position 


list-style-type 


属 性 名 


表 C-11 表格 属性 








< 列表 样式 图 像 > 


none 

inside 
outside 
disc 

circle 
square 
decimal 
decimal-leading-zero 
lower-roman 
upper-roman 
lower-greek 
lower-alpha 
lower-latin 
upper-alpha 
upper-latin 
armenian 
georgian 
none 


值 





caption-side 
table-layout 
border-collapse 


border-spacing 


top 
bottom 
auto 
fixed 
collapse 
separate 
<length> 
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属 性 名 


值 





empty-cells 


border-style 


X C-12 页面 属性 
属 性 名 


show 
hide 
none 
hidden 
dotted 
dashed 
solid 
double 
groove 
ridge 
inset 
outset 


值 





orphans 
page-break-after 


page-break-before 


page-break-inside 
widows 


表 C-13 用 户 界 面 属性 
属 性 名 


< 整数 > 
auto 
always 
avoid 
left 
right 
auto 
always 
avoid 
left 
right 
avoid 
auto 


< 整数 > 


值 





Cursor 


«url» 
auto 
crosshair 
default 
pointer 
move 
e-resize 
ne-resize 
nw-resize 
n-resize 
se-resize 
sw-resize 
s-resize 
w-resize 
text 

wait 

Help 
progress 
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属 性 名 


值 





outline 


outline-color 


outline-style 


outline-width 


表 C-14 单位 


< 轮廓 颜色 > 
< 轮廓 样式 > 
< 轮廓 宽度 > 
< 颜色 > 
invert 
< 边框 样式 > 




















KZ 





URLs 


em 
ex 

px 

in 

cm 

mm 

pt 

pc 

#000 

#000000 

(RRR, GGG, BBB) 
(R%, G%, B%) 

< 关键 字 > 


<url> 























BM 完 本 书 之 后 ， 你 应 该 会 急于 开始 用 JavaScript 为 Web 站 点 增色 添彩 。 但 是 ， 关 于 JavaScript 
语言 还 有 许多 要 学 习 的 东西 ， 而 且 你 在 编写 代码 时 可 能 会 遇 到 问题 。 

正如 你 所 料 ， 为 这 些 问题 寻找 答案 的 最 佳 地 方 是 在 网 上 。 在 网 上 有 许多 资源 可 以 帮助 你 解决 问题 

以 及 深入 了 解 JavaScript。 









































在 这 个 附录 中 ， 我们 将 介绍 几 个 最 有 帮助 的 面向 JavaScript 的 Web 站 点 ， 还 要 提 到 本 书 作 者 认为 
有 帮助 的 其 他 书 。 
但 是 ， 首 先 提醒 你 注意 一 点 : 网 络 不 是 静态 不 变 的 。Web 站 点 可 能 会 改变 它们 页 面 的 地 址 ， 所 

















以 随 着 时 间 的 推移 ， 我 们 列 出 的 URL 到 你 使 用 它们 时 可 能 会 失效 。 我 们 仅仅 是 推荐 这 些 URL, Jf 
不 控制 它们 。 有 时 候 ， 甚 至 整个 站 点 都 会 消失 。 如 果 你 发 现 一 个 链接 失效 了 ， 那 么 请 访问 我 们 的 配 
Æ Web 站 点 (www.javascriptworld.com )， 看 看 我 们 是 否 发 布 了 你 所 寻找 的 页 面 的 新 位 置 。 


D.1 在 网 上 寻找 帮助 


在 Mozilla 的 网 站 上 可 以 找到 原始 的 JavaScript 文档 , 但 是 在 微软 和 独立 JavaScript 页 面 上 有 许多 
好 信息 。 下 面 是 一 些 最 好 的 JavaScript 网 站 。 






































D.1.1 浏览 器 厂商 

既然 是 Netscape 开发 了 JavaScript, mi Mozilla 项 目 开 发 了 开放 源码 的 Mozilla 和 Firefox (E 
们 是 Netscape 浏览 器 的 后 继 者 )， 所 以 Mozilla 项 目 提 供 了 关于 JavaScript 语言 和 进一步 开发 的 许 
多 好 信息 。 

1. JavaScript 中 心 

















http://developer.mozilla.org/en/JavaScript 

这 个 网 站 ( 见 图 D-1) 对 所 有 水 平 的 JavaScript 用 户 都 有 帮助 ， 其 中 包含 工具 、 文 档 和 在 线 社 区 
的 链接 。 文 档 包 括 Core JavaScript Reference ( 讨论 JavaScript 1.5 ), 它 介绍 了 JavaScript 语言 的 基本 知 
识 ， 定 义 并 解释 了 JavaScript 中 使 用 的 概念 。 这 个 网 站 有 一 定 的 学 习 难 度 ， 示 例 也 比较 粗略 ， 但 是 在 
消化 了 本 书 的 内 容 之 后 ， 你 应 该 能 够 理解 这 些 资料 。 在 这 里 还 可 以 找到 Core JavaScript Guide， 以 及 
对 JavaScript 1.6 之 后 新 增 特性 的 解释 。 
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eon JavaScript - MDC Docs 
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TABLE OF CONTENTS 
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图 D-1 Developer Center 的 Mozilla JavaScript 部 分 是 进一步 了 解 JavaScript 的 好 地 方 


2. Venkman 调试 器 

http://developer.mozilla.org/en/venkman 

当 需 要 对 JavaScript 进行 调试 时 ， 使 用 出 色 的 调试 工具 肯定 会 对 你 有 帮助 。Venkman 是 Mozilla 
项 目 提供 的 JavaScript 调试 器 ， 它 是 一 种 适用 于 Firefox, Thunderbird 和 Mozilla 的 好 工具 ， 人 允许 用 户 
分 步 执 行 代码 ， 设 置 断 点 ， 在 脚本 执行 时 检查 对 象 和 变量 ， 以 及 处 理 JavaScript 源 代 码 。 

3. Mozilla Hacks—Web 开发 者 博客 

http://hacks.mozilla.org 

该 blog 自称 它 “ 面 向 使 用 Mozilla Firefox 和 开放 Web 的 人 ， 突 出 前 沿 性 的 东西 ” END 
如 此 。 

4. Microsoft 的 JScript 语言 

http://msdn.microsoft.com/hbxc2t98.aspx 

JScript 是 Microsoft 自己 的 JavaScript 版 本 ， 在 Microsoft 开发 者 网 站 上 有 自己 的 独立 页 面 ， 如 图 
D-2 所 示 , 登录 网 站 可 以 学 习 JScript 与 Mozilla 的 JavaScript 之 间 的 相同 点 和 不 同 点 , 还 可 以 找到 详细 
的 JScript 语言 参考 书 和 JScript 用 户 手册 。 

5. Surfin 的 Safari 

http://webkit.org/blog/ 

虽然 这 个 网 站 (如 图 D-3 所 示 ) 不 仅仅 介绍 JavaScript, 但 它 全 面 介绍 了 Apple 的 Safari 浏览 器 及 
其 WebKit 演 染 引擎 一 一 已 不 只 是 Mac 才能 用 了 。 在 这 里 可 以 直接 从 Apple 的 员工 那 得 到 关于 Safari 
的 下 一 个 版 本 中 包含 什么 功能 以 及 不 包含 什么 功能 的 信息 。 同 时 还 可 以 找到 WebKit 可 下 载 的 nightly 
版 本 ， 让 我 们 在 Apple 正式 发 布 很 久之 前 就 能 提前 使 用 到 新 功能 。 
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@ JScript (Windows Script Technologies) - Internet Explorer provided by Dell [Etre] 
QE ~ [BB ntp//msdn microscftcom/en-us / hbxc298.aspx [5| x || Live Seara ae 
File Edit View Favorites Tools Help 
We Be B Script (Windows Script Technologies) A-A-A © 





| msdn 
P 





Microsoft Developer Network 


Home Library 





| MSDN ^ Developer Centers ^ Microsoft Developer Network." 


JScript 
JScript (Windows Script Technologies) 


| The following sections explain how to use JScript and provide details about its language elements. 
E In This Section 
JScript 
ion about how to 


ie JScript and includes a guide to regular expressions. 





3Scri ipt language 
'xplair 





the “elements that compris the JScript language. 
E Related Sections 


VBScript 
Includes information about how to use VBScript and reference information about the language. 








@ Internet | Protected Mode: On R10% ~ 








图 D-2 Microsoft 的 Windows IL Technologies 页 
面 有 JScript 的 详细 介 
开发 的 JavaScript “Fh 


绍 ,JScript 是 Microsoft 


D.1.2 博客 





Surfin Safari - Marine fo i so relish 

















图 D-3 要 想 了 解 Safari 的 最 新 信息 ( Mac Windows 
或 者 iPhone 平台 ) ， 登 录 Surfin 的 Safari 





有 许多 专注 于 JavaScript 的 博客 。 下 面 是 我 们 喜欢 的 一 些 博客 ， 但 是 还 有 许 许多 多 出 色 的 博客 。 


1. Ajaxian 
http://ajaxian.com/ 








这 
的 播客 ， 等 等 ( 见 图 D-4 )。 
我 们 相信 随 


它 有 时 候 会 展示 非常 


这 是 一 个 非常 好 的 博客 ， 提 供 新 闻 、JavaScript 和 Ajax 资 
惊人 的 Ajax 效果 ， 使 人 认为 它 
着 时 间 的 推移 ， 这 个 博客 的 视角 会 日 渐 成 熟 。 它 还 有 一 个 坏 毛 病 : 有 时 候 会 把 不 


源 的 列表 ， 解 释 JavaScript 和 Ajax 技术 
过 分 追求 时 奢 ， 但 是 


5 Ajax 





mi 











n 





B 


的 东西 当做 Ajax， 比 如 Flash 就 不 





为 止 ， 对 于 和 希望 实现 很 酷 的 用 户 界面 效果 的 开发 人 员 ， 


属于 Ajax 的 范围 ， 





但 是 我 们 希望 它 在 这 方面 也 会 逐渐 改变 。 到 目前 


这 仍然 是 一 个 不 错 的 站 点 。 





The State = Sort of — of 


HTMLs Audio 


Related Content: 








D-4 Ajaxian 博客 是 了 解 JavaScript 和 Ajax 新 闻 和 信息 的 好 地 方 
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2. QuirksMode 

http://www.quirksmode.org/blog/ 

Peter-Paul Koch 是 和 荷兰 的 一 位 JavaScript 开发 人 员 。 他 的 站 点 〈 见 图 D-5) 最 出 色 的 特色 是 ， 它 
非常 及 时 地 提供 关于 浏览 右 及 其 JavaScript 功能 的 最 新 消息 。 它 并 非 一 个 指南 性 站 点 , 但 是 提供 了 许 
多 对 初级 脚本 开发 人 员 有 帮助 的 基本 信息 。 




















$5 
EA Ade] Ca J|] vo me cus TS Coe Dm 
jm Work in the Netheriands 
































图 D-5 Peter-Paul Koch 的 QuirksMode 站 点 常常 会 在 其 他 人 之 前 提供 最 新 的 JavaScript fri 
D.2 离线 资源 


D.2.1 图 书 


尽管 本 书 的 作者 希望 光 靠 本 书 就 能 够 让 你 成 为 JavaScript 专家 ， 但 是 我 们 知道 这 是 不 现实 的 ， 在 
你 消化 了 本 书 之 后 ， 可 能 还 需要 了 解 更 多 信息 。 图 书市 场 上 有 数 不 清 的 JavaScript 图 书 ， 下 面 是 我 们 
认为 最 好 的 几 本 书 (排名 不 分 先后 )。 

1. JavaScript 权威 指南 

由 David Flanagan $i, O'Reilly 出 版 。 这 是 一 本 针对 JavaScript 语言 全 面 的 参考 手册 。“ 胆 小 勿 
A", 很 多 专家 通过 本 书 查 阅 生 个 的 操作 符 并 制定 怪异 的 语法 。 在 经 过 了 漫长 的 等 竺 之后, 本 书 的 第 6 
版 出 版 了 ， 带 来 了 最 新 的 知识 库 。 

2. ppk 谈 JavaScript 

Peter-Paul Koch 是 公认 的 JavaScript 大 师 之 一 。 在 New Riders 出 版 的 这 本 书 中 ， 他 使 用 为 客户 创 
建 的 真实 的 脚本 示例 帮助 读者 在 理论 和 实践 两 方面 掌握 JavaScript. 

3. JavaScript 高 级 技术 

由 John Resig (jQuery 名 人 ) 执笔 , 辅助 中 级 JavaScript 开发 人 员 成 为 高 级 开发 人 员 。 本 书 不 适合 
新 手 ， 它 是 一 本 学 完 后 值得 深入 研读 的 好 书 。 












































D.2.2 视频 
毕竟 本 书 名 中 就 带 有 视觉 一 词 ， 因 此 很 多 读者 喜欢 一 种 更 直观 的 学 习 方 式 也 是 很 正常 的 。 这 里 推 
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荐 两 个 我 们 比较 喜欢 的 视频 培训 资源 ， 因 为 它们 是 我 们 自己 做 的 。 从 www.lynda.com 中 可 以 找到 在 线 
视频 流 和 CD。 

1. JavaScript 基础 训练 

这 份 资源 中 的 很 多 东西 会 看 起 来 比较 熟悉 ， 因 为 JET (JavaScript 基础 训练 ) 和 本 书 的 起 源 相同 。 
通过 视频 教程 学 习 基 础 知识 是 一 种 很 好 的 方式 。 

2. Ajax 基础 训练 
因为 涵盖 了 JET 没有 介绍 的 内 容 ，AET (Ajax 基础 训练 ) 超越 基础 水 平 ， 跨 入 中 级 编程 。 


D.3 解决 问题 的 技巧 

































































D.3.1 缺失 的 插件 


1. Firebug 调试 器 

http://getfirebug.com 

不 管 你 是 否 喜 欢 Mozilla 的 Venkman, 都 会 爱 上 Firebug, 如 图 D-6 所 示 。 在 Firefox 中 使 用 Firebug 
不 仅 可 以 调试 脚本 ,还 可 以 调试 HTML 和 CSS。Firebug 还 有 以 下 优点 : 免费 、 文 档 良 好 、 记 录 便 捷 、 
可 随意 设置 断 点 和 DOM 支持 。 

如 果 说 我 们 的 编程 生活 中 唯一 的 遗憾 就 是 在 IE. Safari 和 Opera 中 缺失 类 似 功 能 的 话 ， 请 登录 
http://getfirebug.com/lite.html, 试 试 Firebug Lite, 如 图 D-7 所 示 。 虽然 功能 方面 不 像 Firebug 那么 全 面 ， 
但 跟踪 bug 时 ， 它 提供 的 简单 通用 界面 是 非常 方便 的 。 
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图 D-6 作为 Firefox 的 插件 ，Firebug 提供 了 相当 图 D-7 如 果 我 们 使 用 的 不 是 Firefox ,那么 也 可 以 运 
强大 的 控制 功能 和 多 样 化 的 代码 检查 方式 行 Firebug Lite。 图 中 显示 的 是 图 D-6 中 的 
页 面 在 Safari 中 的 显示 效果 






































2. JSHint 
http://jshint.com 
如 果 你 跟 我 们 一 样 ， 在 遇 到 HTML 和 CSS 的 问题 时 第 一 反应 就 是 去 找 一 个 验证 器 ， 而 同时 又 希 
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望 在 JavaScript 方面 也 有 类 似 的 工具 的 话 ， 那 你 可 能 听 说 过 JSLint。JSLint 是 一 个 代码 检查 工具 。 再 
如 果 ， 你 还 跟 我 们 ( 以 及 其 他 很 多 的 JavaScript 程序 员 ) 一 样 ， 发 现 JSLint 实际 用 起 来 不 太 好 用 ， 那 
么 JSHint 就 是 你 需要 的 。JSHint 的 设计 初衷 不 仅 是 代码 检查 , 而 且 富 有 灵活 性 , 不 会 像 JSLint 那样 出 
现 “ 说 一 不 二 ”的 死板 规定 。 


























D.3.2 在线 pastebin 

你 是 否 曾 经 希望 不 仅仅 是 拿 浏览 器 来 测试 代码 ， 同 时 还 想 编 写 代 码 ? 是 啊 ， 为 什么 我 们 必须 要 来 
回 切换 界面 ? pastebin 的 功能 之 一 就 是 在 同一 窗口 中 编写 和 运行 代码 。 

另 一 个 方便 的 功能 是 可 以 保存 文件 并 展现 给 其 他 人 【也 就 是 在 你 需要 帮助 的 时 候 指 给 别人 看 )。 





而 更 酷 的 是 它 可 以 修改 你 的 代码 ， 帮 你 查找 和 修正 那些 令 人 讨厌 的 bug。 

网 上 有 很 多 关于 pastebin 的 网 站 ， 一 些 是 支持 HTML, CSS 和 JavaScript 的 。 有 一 部 分 人 喜欢 下 
面 两 个 。 

1. JSBin 

http://jsbin.com 

2. JSFiddle 

http://jsfiddle.net 


在 线 获 取 帮 助 


学 已 至 此 ， 我们 希望 为 JavaScript 定位 问题 ， 通 常 我 们 会 这 样 做 : 在 Google 中 输入 问题 ， 看 看 有 
什么 好 的 建议 。 而 且 很 神奇 的 是 ， 随 着 我 们 编程 的 深入 ， 之 前 推荐 的 网 站 还 会 一 次 又 一 次 地 出 现在 我 
们 的 查找 结果 中 ， 如 图 D-8 所 示 。 
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D.3.3 
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questions tagged javascript 


‘About 18 600,000 results (0.11 seconds) 





3 Everything Newest javascript Questions - Stack Overflow 
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图 D-8 没 错 ， 这 是 一 幅 Google 搜索 结果 的 真实 截 








图 。 所 以 说 ， 当 搜索 JavaScript 代码 





方面 的 问题 时 ， 往 往 会 发 现 答案 大 部 分 都 在 Stack Overflow 上 
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Stack Overflow 
http://stackoverflow.com 





如 果 你 做 过 足够 多 的 编程 工作 ， 会 发 现 Google 经 常会 向 你 推荐 这 个 网 站 。 然 后 你 会 发 现 自己 不 
需要 再 返回 Google 去 搜索 了 。 在 我 们 为 自己 获取 帮助 的 同时 ， 也 在 帮 其 他 人 回答 问题 。 











我 们 可 以 按照 标签 ( 如 javascript 或 jquery ) 浏览 该 网 站 ,如 图 D-9 Brzs, 或 者 直接 在 搜索 框 中 输 
入 我 们 的 问题 。 很 可 能 该 问题 已 经 有 人 问 过 并 解答 了 ; 如 果 没 有 ， 单 击 Ask Question 按钮 ， 提 出 详细 


的 问题 描述 。 
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Kj D-9 % JavaScript 方面 有 100 000 多 个 问题 , RATT ERM BE AEA TAR 


v 提示 








口 本 书 的 另 一 位 作者 Dori 花 在 该 网 站 上 的 时 间 特 别 多 ， 后 来 她 晋升 了 ， 直 接 成 为 了 网 站 的 工作 





人 员 











不 过 我 们 不 提倡 大 家 这 么 疯狂 。 话 又 说 回来 了 ， 如 果 你 发 现 Stack Overflow RAH, 


请 留意 一 个 名 为 Dorie 的 用 户 ,她 现在 是 一 个 社区 管理 员 ,也 是 Stack Exchange( Stack Overflow 


的 母 公 司 ) 的 技术 宣讲 师 。 
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“学 习 JavaScript 必 备 书 目 ! ” —JavaScript.about.com 


“本 书 是 我 所 见 过 的 讲解 最 清晰 、 内 容 最 全 面 、 最 吸引 人 的 JavaScript 程 序 设计 图 书 。” 
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JavaScript Visual QuickStart Guide prm 


JavaScript 


基础 教程 (第 8 版 ) 


在 Web 开 发 如 火 如 茶 的 今天 ，JavaScript 理 所 当然 地 成 为 广大 开发 人 员 必 须 熟练 掌握 的 一 项 主流 技术 。 根 据 有 关 编 程 语 言 市 场 份 
额 的 调查 ，JavaScript 成 为 Web 开 发 人 员 使 用 最 多 的 开发 语言 。 

本 书 被 奉 为 经 典 JavaScript 入 门 书 ， 以 易学 便 查 、 图 文 并 茂 、 循 序 渐进 而 著称 ， 作 者 善于 用 常见 任务 讲解 语言 知识 ， 书 中 除了 讲 
述 JavaScript 编 程 的 必 知 必 会 知识 外 ， 还 同时 兼顾 了 DOM、XML、Ajax、jQuery 等 重要 的 技术 内 容 。 多 年 来 ， 本 书 不 断 重印 改版 ， 原 
版 累计 销售 已 经 近 20 万 册 。 第 6 版 和 第 7 版 的 中 文 版 出 版 后 也 多 次 重印 ， 广 受 国内 读者 好 评 。 第 8 版 对 上 一 版 进行 了 全 面 修订 和 更 新 ， 
并 增加 了 全 新 的 2 章 内容 ， 分 别 介绍 jQuery 的 基础 知识 以 及 实际 应 用 。 

通过 本 书 ,读者 可 以 迅速 轻松 掌握 用 JavaScript 进 行 Web 开 发 的 基本 技能 ， 并 了 解 最 佳 实践 ， 领 情 其 中 真 谤 。 
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